Centering wrapper div when two child divs are side by side

Question

I know this question has been asked many times but I am having difficulty in finding out in what is going wrong with the code in my case.

I have a wrapper div with a number of other divs contained within it. Some of those divs are side by side using float: left; ect. and the layout is almost exactly as I would like it. However for some reason the wrapper divs border is not extending all the way to the footer element when the wrapper is NOT float: left;

Example: http://jsfiddle.net/8wVdm/

However when I add float: left to the wrapper div the border does extend all the way like I want it too: http://jsfiddle.net/C5kTh/

However the problem with this is that the wrapper div is then not automatically centered. How do I fix this?

Answer 1

You'll want to research clearfixing, which is a set of css rules that force a container to wrap around any floated elements it contains:

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

here is a nice detailed answer on how they work.

here's an updated fiddle with a clearfix added.