When container DIVs do not expand to contain floating DIVs

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

When container DIVs do not expand to contain floating DIVs

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: When container DIVs do not expand to contain floating DIVs

Post 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.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: When container DIVs do not expand to contain floating DIVs

Post by jack_indigo »

Hmm. Stay tuned. Let me try that!
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: When container DIVs do not expand to contain floating DIVs

Post by jack_indigo »

Yep, that can work too. So, does the float technique slow the page down a little?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: When container DIVs do not expand to contain floating DIVs

Post 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.
Post Reply