Why are both divs the same color? Only 1 is defined as green

Question

I have two separate divs, why is the background color the same lime color for both? I want the first div 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>

Heres 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;
 }

score 4 · Accepted Answer · answered Mar 20 '14 at 16:43

4

When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element

#head1 {
    overflow:auto;
}

jsFiddle example

answered Mar 20 '14 at 16:43

j08691

204,283
31
260
272

score 2 · Answer 2 · edited May 23 '17 at 10:26

It's actually white. You just can't see it.

Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.

Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/

As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.

Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/

The fix for this is to use either a clearfix or simply overflow:auto.

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

Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?

score 0 · Answer 3 · answered Mar 20 '14 at 16:45

0

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

answered Mar 20 '14 at 16:45

andrei

2,934
2
23
36

Why are both divs the same color? Only 1 is defined as green

3 Answers3