CSS

#container {
width:900px;
margin-right:auto;
margin-left:auto;
background-color:#CCCCCC;
}

#floated_left_inner_element{
width:350px;
float:left;
}

#floated_right_inner_element{
width:550px;
float:right;
}

However, you may have noticed that the container height, and thus background color, div does not expand with the height of it’s inner elements. This was very frustrating to me for a while and I often tied to use JavaScript to correct this issue. But thankfully, the CSS answer I much more simple and efficient.

Thanks to a post by Matthew James Taylor, I now know the golden rule:

A floated container div will always be the height of it’s floated contents.

Therefore, you set the container to float left or (right). But then your content is not centered, which was the point of the container after all. To fix this, you simply add another outer container around the first container. See code below:

XHTML Markup

<div id=”outer_container”>

<div id=”container”>

<div id=”floated_left_inner_element”></div>

<div id=”floated_right_inner_element”></div>

</div>

</div>

CSS

#outer_container {
width:900px;
margin-right:auto;
margin-left:auto;
}

#container {
width:900px;
float:left;
background-color:#CCCCCC;
}

#floated_left_inner_element{
width:350px;
float:left;
}

#floated_right_inner_element{
width:550px;
float:right;
}

Voila, magic =]