Clearing DIV with float

Question

I have a div (navigation) that is "float:left;". After this div main content comes. And second divs comes over the first one.

If I add style="clear:both;" after the first dif, then it works. However, i wonder if this is the right way to do this, this is my only question.

<div class="nav">
    <ul>
        <li><a href="">text</a></li>...
    </ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>    

.nav{
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;    
}

.nav li{
    float: left; 
    margin: 0 2px;
}

.nav li a{        
    display: block;
    padding: 8px 15px;        
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border-right: 1px solid #ccc; 
    background-color: #3b3d49;
    -webkit-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
 }

Answer 1

Yes, that works fine. However, you don't need another element to clear the content, you can add the style to the content wrapper.

In your style sheet:

#content-wrapper { clear: both; }

---

Another approach is to add a container around the floating element, and make it contain its children using the overflow style:

<div class="nav-container">
  <div class="nav">
    <ul>
      <li><a href="">text</a></li>...
    </ul>
  </div>
</div>
<div id="content-wrapper">
</div>

Then in your style sheet add:

.nav-container { overflow: hidden; }