Why do both divs have the same color? Only 1 is identified as green

Question

I have two separate divs, why is the background color the same linden color for both? I want the first div to be white. Here's the HTML:

<div id="head1">
    <ul>
        <li><a class="menu" href="#">Link one</a></li>
        <li><a class="menu" href="#">Link two</a></li>
        <li><a class="menu" href="#">Link three</a></li>
        <li><a class="menu" href="#">Link four</a></li>
    </ul>
</div>

<div id="title1">
     <h1>some title</h1>
</div>

Here is the CSS:

 #head1 {
 }
 #title1 {
     height:100px;
     background-color:lime;
 }
 ul {
     float:left;
     width:100%;
     padding:0;
     margin:0;
     list-style-type:none;
     border-bottom:2px aqua dashed;
 }
 li {
     display:inline;
 }
 a.menu {
     float:left;
     width:6em;
     text-decoration:none;
     color:#666666;
     padding:0.2em 0.6em;
     border-right:1px solid white;
 }
 a.menu:hover {
     background-color:#ff3300;
 }
 h1 {
     font-family: Gautami;
     font-size:300%;
     color: #FFFFFF;
 }

Answer 1

When you float in a list, the #title div essentially looks as if it were behind it. To fix this, add overflow:autoto the element#head1

#head1 {
    overflow:auto;
}

JsFiddle example

Answer 2

Actually white. You just don't see it.

ul ( ) , DOM. , div, #head1 "ul. - div 0px.

, : http://jsfiddle.net/w858z/

, #head1 , 0px. , ul .

​​ floats : http://jsfiddle.net/48Ahm/

- clearfix, overflow:auto.

: http://jsfiddle.net/w858z/1/
clearfix: http://jsfiddle.net/w858z/2/

stackoverflow css, dom: CSS, ?

Answer 3

You just need to clear the second div clear: both; I did jsfiddle: http://jsfiddle.net/5gwZ6/