Question

The idea: I have a container div with two divs inside of it, like two columns on a page.

The issue: I have to use the CSS ‘float’ property in order to get the two divs to display next to each other, but when I apply float:left or right to the divs the parent div, which is not floated, does not get stretched to the size of the child divs, so the background disappears. I know a Javascript trick to solve this, but are there any simple, clean CSS solutions that I’m missing?

Answer 1

Adding “overflow:auto;” to the parent should work.

Adding something like this right after floated elements works:

<div class="parent">
    <div style='float:left;'></div>
    <div style='float:right;'></div>
    <div class='clear'></div>
</div>

Then just add .clear class to your css:

.parent{
    overflow:auto;
}
.clear{
    clear:both;
}