This is a recurring issue for me. Positioning divs. Honestly I'm quite intelligent and good at learning new things... I don't know what it is about CSS that continues to confuse me.

Say you have a <div like so

<div class="wrapper">


<div class="leftColumn">


</div>


<div class="rightColumn">


</div>


</div>


Their css looks like so


I have a clear: both because I repeat this chunk of html, e.g

<div class="wrapper" />
<div class="wrapper" />
<div class="wrapper" />

What I'm trying to work out is, once you position 2 columns using this method, they hope up out of the wrapper div and it no longer actually wraps around them. What I mean by that is if you put a background color on the wrapper class, regardless of how high the left or right column is, the wrapper is not affected.

If you have a look at the following image, you see the above theory applied. There is a little rounded corner class being applied to the wrapper wit a yellow background. It should wrap around both the left and right column but it doesn't.

 mmm.jpg ( 24.27K ) Number of downloads: 4


Whats the gap in my css knowledge?

The gap is that you need to apply the same logic as you apply to your wrapper. Try this:





You need a "clearing" div as the last div in your wrapper. Just to clear the floats, I make a class for it, as you'll need to use it all over the place

Wow. Thats all. It worked. Seems weird to me that it works but then again thats how I feel about most css.

Thanks heaps man.

My pleasure!

I'd explain in more detail why it works, but to be honest, I don't know the detail. I just know it works!

It seems that because you've floated items, they're essentially "floating" in the top of the div, and so you need to clear both the left and right float before the div closes... well, that's my logic for it anyway

lol. yeah thats how i think about it too.

I think it would be great if something could just be applied to the wrapper div to tell it to continue to hold size connectivity / stretching whatyamacallIt if the elements are floating but i'm not complaining.

I just imagine something like

Would be so cool

Try the css { overflow: auto; } on the parent float.

Overflow auto/hidden can be useful sometimes, but in general I recommend a simple clearing <div> as the most bomb-proof solution, with no real drawbacks.

Hey, CSS-Tricks has a screencast which covers floats that might help you. In fact, it covers your exact issue at about 6:15 in the video. Well worth a look to help explain floats, Chris is great!

CSS-Tricks: All About Floats Screencast

You can also add some fancier CSS to the last div in the markup that replaces the need for an extra empty div. However it's not as browser compatible. I don't recommend this method unless you're darn good with CSS, because it'll take some tweaking. I personally use the empty div most of the time anyway. Just showing another method.



This post has been edited by Aken: Nov 16 2008, 10:58 PM

CSS compatibility tables

There is a link to see what you can use in what browsers. I think the clear and clearfix methods are best for now, At least until everyone adopts IE8 (which by the way will have full CSS2 but extreamly limited CSS3 )