Question

At the moment, I have two div tags which are set to “float:left;” I want to apply a background colour to both but each can vary in size dependent on the contents.
I have tried adding an extra div and just applying a background colour to it but there is no height?
Here is my test page: http://joshblease.co.uk/wp-content/themes/rounded/test.php

Thanks, Josh.

Answer 1

Oh I see. You want the background to be a box around the extremes of the floated divs?

Parent divs by default do not expand to contain floated children. There are a few workarounds to this:

• Set the parent div to have overflow: hidden or overflow: auto.
• Add an empty element after the parent (#back), and set it to clear: both.
• Use css to do the above automatically:

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

Any of those should work for you.