A tip every web developer knew but me

Funny how the simplest things will slip by you (or at least you'll forget and have to remind yourself from time to time).

Lets say you have two divs, one contained within another, where the child has some floating style and the parent does not. Depending on the amount of content in the parent and child divs, you may see it spill out of the parent like so:

Notice how the bottom border goes through the text. The markup to generate this is:

<div style="border-bottom: 1px solid black" id="css_example_parent">
  <div style="float: left;" id="css_example_child">
    Alot of content<br/>
    goes in the child div<br/>
    to illustrate the problem<br/>
   </div>
   &nbsp;
</div>

To fix this simply add a "<div style="clear:both;"></div>" as the very last element of the container div like so:

<div style="border-bottom: 1px solid black" id="css_example_parent">
  <div style="float: left;" id="css_example_child">
    Alot of content<br/>
    goes in the child div<br/>
    to illustrate the problem<br/>
   </div>
   &nbsp;
   <div style="clear:both;"></div>
</div>

Resulting in:

Read more on the subject