CODEWITHSUNDEEP
css
renathy
renathy

Reputation: 5355

Clearing DIV with float

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

Upvotes: 3

Views: 210

Answers (6)

Guffa
Guffa

Reputation: 700252

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

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You could use <br clear="all" /> for short hand. And another way is that you could use clearfix method, you could search it on google for the best. this is the method that @conner explained it.

Upvotes: 1

user2188149
user2188149

Reputation:

yes it is correct to see this example from the creators of html

http://www.w3schools.com/cssref/pr_class_clear.asp

Upvotes: 1

Hiren Pandya
Hiren Pandya

Reputation: 995

The main use of the above mentioned "clear:both"

The clear property specifies which sides of an element where other floating elements are not allowed.

"clear:both"

means No floating elements allowed on either the left or the right side.

Upvotes: 2

iConnor
iConnor

Reputation: 20189

this is the best way, just add class .group to your container 

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Upvotes: 1

rhughes
rhughes

Reputation: 9583

In answer to your question, cleaning floats with clear:both; is a pretty standard way of doing this, yes.

Upvotes: 1

Related Questions