Blog Rat: Why inner DIV doesn't inherit background color

Monday, October 26, 2009

Why inner DIV doesn't inherit background color

What situation will make an inner DIV not inherit the background color of the outer DIV? It usually happens when CSS or HTML style's float attribute exists. Considering the following HTML,

<html>
<body style="background-color:#F8E0EC;">
<div style="background-color:#fff;padding:20px;border:10px solid blue;">        
  <div style="float:left;width:330px;border: 1px dotted red;">
      <p>
        <strong>When:</strong>          
        12/5/2009        
        <strong>@</strong>
        3:30 PM
      </p>
      <p>
        <strong>Where:</strong>
        5 main street
        USA
      </p>
      <p>
        <strong>Description:</strong>
        test
      </p>
      <p>
        <strong>Contact:</strong>
        425-555-1212
      </p>   
  </div>   
</div> 
</body>
</html>

The picture will look like this:
inner div floats outside

As you can see, most inner DIV text are sitting outside the blue box (outer DIV). If you take out the float attribute, everything will work fine. The reason of using float attribute is that you may want to have another DIV sit side-by-side together. In this situation, you need to put

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

at the end of the inner DIV, just before closing the outer DIV. In my example, I will continue to use only one inner DIV. You can test it yourself with two.

<html>
<body style="background-color:#F8E0EC;">
<div style="background-color:#fff;padding:20px;border:10px solid blue;">        
  <div style="float:left;width:330px;border: 1px dotted red;">
      <p>
        <strong>When:</strong>          
        12/5/2009       
        <strong>@</strong>
        3:30 PM
      </p>
      <p>
        <strong>Where:</strong>
        5 main street
        USA
      </p>
      <p>
        <strong>Description:</strong>
        test
      </p>
      <p>
        <strong>Contact:</strong>
        425-555-1212
      </p>   
  </div>

  <div style="clear:both"></div>
   
</div> 
</body>
</html>