How to make a div from foaming

Question

I usually use a table for layout. But I would like to try the layout in Div. Here is the problem: when I have a "float: left" div, it makes the next div float with it. I tried putting "float: none" in the next div so that it breaks the line, but it does not work.

Here is what I want to do using the 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 using a 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 using div is that the bottom

---

also moves left. I tried setting a float: none of the last div, HR label, and even divContainer. Why the last hr float?

Answer 1

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%;" />

3 divs left , , divContainer div . div : left .

edit: , -.

Answer 2

: ;

.

Answer 3

adding

#divContainer {
    overflow: hidden;
}

will do this without an extra div at the end