How do I center a div and make it expand around the divs inside of it?

Question

I have a page that I want centered, with a background and a border around the entire content.

I made a div and set it with the background color and the border settings I want.

Problem is that it has divs inside it that float and the background does not stretch around the floating divs. The only way I was able to get it to work was by setting position:absolute. Then the border did expand around the floating divs but I was unable to center them using regular html/css.

I found a javascript hack to make it center but it only centers after the page loads and it looks bad.

I am sure there is a way to have the container expand and still have it centered, I just can't figure it out.

here is a sample html page that shares my problems

<div style="background-color: Red; width: 980px; position: absolute;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
</div>

and here is the Javascript that makes it work (uses Jquery)

$(function() {
        var winH = $(window).height();
        var winW = $(window).width();
        $("#container").css('left', winW / 2 - $("#container").width() / 2);
    });

There has got to be a better way.

Thanks

Answer 1

Use auto as left and right margin to center the element.

Put an element after the floating elements and use clear to put it below them. As it's not floating, it will affect the size of the outer div.

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container">
    <br />
    <br />
    <br />
    <br />
    <div style="width: 400px; background-color: Black; float: left;">
        <br />
        <br />
    </div>
    <div style="width: 400px; background-color: Blue; float: left;">
        <br />
        <br />
    </div>
    <div style="clear: both; height: 0; overflow: hidden;"></div>
</div>