Development No more! <br class="clear" /> I hate thee!

overflow:auto;

I don't know if anyone else finds that little tiny bit of code exciting... I do though

Well, maybe not exciting, but definitely nice.

Basically, since the dawn of time (last may) I've been using <br class="clear" />. A dirty little bit of code that stops containing div's from not surrounding their contents if they are floated. Now though! overflow:auto;

Its not a discovery of mine by any means, but I read it somewhere, and I had never heard about it before that day and I know there are people on here that do the web design/development dance and I thought it might be helpful.

 

I didn't know that worked either! Nice find.

I do my best not to use the clear property by floating things within floated elements.

 

could you please explain what it does?
I thought auto was the default overflow setting.

 

'visible' is the default overflow setting.

Interesting, the spec for 'auto' says that it's user-agent dependent. How many browsers have you tried it in Will?

 

works in everything I have on my machine.

ie7
ie6
ie5.5

opera (whatever the latest one is)

firefox

works in safari as well according to the office mac-humper.

Bearing in mind, I've been testing it with very very basic css. just 2 floated div's and a container and a footer clearing all of that. I see no reason why anything might happen that isn't already known about though.

Its already making my life easier.

 

Great find! - do you have an example before/after, although I'll try it soon enough.

 

The only thing that worries me is that if you want to specify a width or height on the containing you might end up getting scroll bars if the content gets bigger.

 

Hmm, I will investigate...

 

hmmm... you are correct... If the containing div (the one with overflow:auto; ) does get scroll bars if the content gets too big. See the code below.

Thing is though... if your floating something within a fixed height container.. not only should you not need the fix, your layouts going to go a bit nuts if the content gets bigger anyway.

Code:

<div style="background:#ff004c; height:200px; width:450px; padding:20px; overflow:auto;">
	<div style="width:10em; height:10em; background:#CCC; float:left; color:#FFF; margin-right:20px;">
	</div>
	<div style="width:10em; height:10em; background:#333; float:left; color:#CCC;">
	</div>
</div>

 

Use overflow: hidden. More details on this is here, been using it for a while.

 

Surely, having scroll bars is better than making the content unreadable... That seems to actually require a height as well...