Prevent floating UL and LI elements underneath a header

Question

Below is a menu inside a header. The ul and li elements are floating and are now floating underneath the header, which I've tried to prevent with clear:both. However, that doesn't seem to work so I wonder... what can be wrong?

html:

<header>
    <ul>
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
        <li><a href='#'>Item 3</a></li>
        <li><a href='#'>Item 4</a></li>
    </ul>
    <div class='clear'/>
</header>

css:

header {
    background: #888;
    height: 20px;
    padding: 10px;
}

ul{
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

ul li{
  margin: 0 10px 0 0;
  padding: 0;
  display: block;
  float: left;
  width: 80px;
  height: 20px;
  border: 1px solid #000;
  background: red;
}

ul li a{
  display:block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  float: left;
  text-align: center;
  padding-top: 2px;
}

ul li a:hover{
  color: #fff;
  background-color: #000;
}​

.clear {
    clear:both;
}

Answer 1

You can use a clearfix:

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

and apply that to both the ul and the header.

Answer 2

Better css for your situation would be (Tested in FF, Chrome, IE6+)

header {
    display: block; /* Necessary for older browsers to render this html5 element properly */
    background: #888;  
    height: 20px;  
    padding: 10px;  
}

ul {  
    margin: 18px 0;  
    padding: 0;  
    list-style: none;  
}

ul li {
    margin: 0 10px 0 0; /* at least some margin-right is necessary to make inline-block work in IE */
    padding: 0 5px; /* you don't have to set a width any longer, so let padding define spacing */
    display: inline-block;
    zoom: 1; /* part 1 of the IE hack to make inline-block work */
    *display: inline; /* part 2 of the IE hack to make inline-block work */
   /* height and line-height not necessary - driven by a element below */
    border: 1px solid #000;
    background: red;
}

ul li a {
    display:block;
    height: 20px;
    line-height: 20px; /* this will vertically center the text in the li */
    text-decoration: none;
    text-align: center;
}

ul li a:hover{
    color: #fff;
    background-color: #000;
}​

Answer 3

Rather than use a cleardiv, perhaps you could try the standard clearfix from html5boilerplate?

Here is the modified markup:

  <header class="clearfix">
      <ul>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
          <li><a href='#'>Item 4</a></li>
      </ul>
  </header>

and here is the css to add:

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


.clearfix {
    *zoom: 1;
}

From the docs:

.clearfix

Adding .clearfix to an element will ensure that it always fully contains its floated children. There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the HTML5 Boilerplate currently uses the micro clearfix.

Answer 4

You can't use /> for divs. Change it from <div class='clear'/> to <div class="clear"></div>

Or try adding another li below the current ones and giving that the clear class.

<header>
    <ul>
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
        <li><a href='#'>Item 3</a></li>
        <li><a href='#'>Item 4</a></li>
        <li class='clear'></li>
    </ul>
</header>