How to force div from unfloating.

Question

I am usually using table to do layouting. But I would like to try out the layouting in Div. Here is the problem, When I "float: left" a div, it makes the succeeding div to float with it. I tried to put "float: none" to the next div to make it break a line but it does not work.

Here is what I want to do using table:

<hr style="width: 100%;" />
<table>
  <tr>
    <td>
      <div id="divLeftPane">
        ...
      </div>
    </td>
    <td>
      <div id="divCenterPane">
        ...
      </div>
    </td>
    <td>
      <div id="divRightPane">
        ...
      </div>
    </td>
  </tr>
</table>
<hr style="width: 100%;" />

Here is what I have so far tried with div using float:

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane">
    ...
  </div>
</div>
<hr style="width: 100%;" />

The problem with the use of div is the bottom

---

is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?

Answer 1

Use the attribute

clear:left;

on the bottom element.

Answer 2

This will give you the desired effect:

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane" style="float:left; ">
    ...
  </div>
  <div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />

Floating the 3 divs left will make them appear side by side, but you'll notice that divContainer does not take the height of the div tags inside it. Adding the div with clear:left basically undoes this.

edit: Avoid inline styles when you do this for real.