Question

I’m trying to make a footer as said here: http://css-tricks.com/left-align-and-right-align-text-on-the-same-line/

The problem is the 2 paragraphs are placed a bit under the footer, as if they where not defined in the div. Here is my code:

<div id="footer" style="clear: both;">
  <p class="alignleft">left</p>
  <p class="alignright">right</p>
</div>

css:

div#footer{
    height: 20px;
    padding: 0px 10px;
    line-height: 20px;
    clear: both;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

Answer 1

Use overflow: hidden; on the container div to clear floats an don’t use height

Demo

CSS

div#footer {
   padding: 0px 10px;
   line-height: 20px;
   overflow: hidden;
}