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:

Alot of content
goes in the child div
to illustrate the problem
 

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

Alot of content
goes in the child div
to illustrate the problem
 

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

Alot of content
goes in the child div
to illustrate the problem
 

Resulting in:

Alot of content
goes in the child div
to illustrate the problem
 

Read more on the subject