CSS: Make floated elements to push down items below it

Floating is a nice way of positioning elements, but most of the time you dont want it to have no weight on the page that elements below it will try to take up its display space.

For example:

<div>
  <ul class="list_wrap">
    <li style="float: left;">FLOAT A </li>
    <li style="float: left;">FLOAT B </li>
    <li style="float: left;">FLOAT C </li>
  </ul>
  <p>Content thats pushed up</p>
</div>

Will give you:

• FLOAT A
• FLOAT B
• FLOAT C

Content thats pushed up

Example of retarded floating.

To fix that, its really simple! Just add "overflow: auto; width: 100%;" to "ul.list_wrap" and you've got yourself a winner!

• FLOAT A
• FLOAT B
• FLOAT C

Content thats pushed up

Not so retarded floating.

[ Source ]