Question

I have this CSS code:

#header {
    width: 100%;
    background: yellow;
}

#content {
    width: 100%;
}

#col1 {
    width: 200px;
    float: left;
    background: red;
}

#col2 {
    width: 600px;
    background: yellow;
    margin: 0px 0px 0px 200px;
}

#col3 {
    width: 200px;
    float: right;
    background: blue;
}

#footer {
    width: 100%;
    height: 90px;
    background: black;
    clear: both; **<~ This**
}

HTML code:

<div id="header"></div>
<div id="content">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
</div>
<div id="footer"></div>

Question:
Is the propertie clear: both need in footer in case of footer different level with colx (col1, col2, col3)?

Answer 1

If you are floating elements inside the footer then yes a clear:both may be required. If you are not floating elements inside the footer then you can take the clear:both out.

Another way to deal with floated elements is to use a structure like this:

<div class="con">
    <div class="lft">lft</div>
    <div class="rgt">rgt</div>
</div>

.con { overflow:hidden; }
.lft { width:100px; float:left; }
.rgt { width:100px; float:left; }