Paragraph flowing outside of div

alignment, css, footer, html

Solution

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

Problem

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

Original source