Page 1 of 1
When container DIVs do not expand to contain floating DIVs
Posted: Thu Oct 16, 2008 11:40 am
by jack_indigo
I just found a ridiculous problem as I try to improve my CSS skills. If you ever try to make a container DIV, and then inside put a left and right column DIV where the left is a fixed width and a float left, and the right is a float left, you may find that the container DIV collapses into like 1px above the two floating DIVs inside it!
The fix was to make the container DIV have a float: left on it. If that's not the stupidest thing in the world.
CSS -- it's a black art.
Re: When container DIVs do not expand to contain floating DIVs
Posted: Thu Oct 16, 2008 2:09 pm
by kaszu
That's because you have to clear the floats. Floating the container is not the best solution how to do it since you are adding another float.
Best solution I have seen so far is
Code: Select all
#container { width: 100%; overflow: hidden; }
There doesn't have to be width, there can be any property which forces container to have layout. It's for IE.
Re: When container DIVs do not expand to contain floating DIVs
Posted: Thu Oct 16, 2008 3:36 pm
by jack_indigo
Hmm. Stay tuned. Let me try that!
Re: When container DIVs do not expand to contain floating DIVs
Posted: Thu Oct 16, 2008 3:46 pm
by jack_indigo
Yep, that can work too. So, does the float technique slow the page down a little?
Re: When container DIVs do not expand to contain floating DIVs
Posted: Fri Oct 17, 2008 3:47 pm
by kaszu
Even if it is a little slower, then it's not noticeable.
I guess to calculate floating div widths browser would need a little more processing.