Question

Possible Duplicate:
why is my content showing outside the div?

I have a problem where the background style for a div doesn’t cover everything nested inside the div.

Here is a jsfiddle to show you exactly what I’m talking about

How can I make the grey background style from the div ddg-corner-statements apply to everything inside the div without setting an absolute height?

Answer 1

This is a common issue when working with floats. There are a couple of common solutions:

1. Add a div after the floats with clear: both. Example.

   <div style="float: left"></div>
   <div style="float: left"></div>
   <div style="clear: both"></div>
   

2. Add the two floats into a container with the CSS attribute overflow: auto. Example.

   <div style="overflow: auto">
       <div style="float: left"></div>
       <div style="float: left"></div>
   </div>
   

3. Make the parent element a float. Example.

   <div style="float: left">
       <div style="float: left"></div>
       <div style="float: left"></div>
   </div>
   

4. Use the :after CSS pseudo element. Example.

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

5. Adding a set height to the parent element. Example.

   <div style="height: 200px">
       <div style="float: left"></div>
       <div style="float: left"></div>
   </div>
   

Personally, I use option 2 for simplicity and semantics’ sake

See an updated version of your code here.