aligning 3 <div> containers?

I have three <div> containers and I want to align them with one being on the left of the screen, one in the middle and one to the right. With equal space left in between the c开发者_Python百科ontainers.

How can I do this?

---

There are a number of ways to do this, with floats or with table layout. There's somewhat of a holy war between the table proponents and the float proponents. I lean slightly towards table layout, but both have their merits. I'll answer for the tabular side:

<table style="table-layout:fixed;width:100%">
  <colgroup><col style="width:33%"/><col style="width:33%"/><col style="width:33%"/></colgroup>
  <tr>
    <td style="vertical-align:top">        
      <div style="border:1px solid red">
        column one with some long text that should wrap but still keep the column at 33%
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid green">
        column two
      </div>
    </td>
    <td style="vertical-align:top">
      <div style="border:1px solid blue">
        column three
      </div>
    </td>
  </tr>
</table>

Here's an example: http://jsbin.com/axojo

---

The 960 Grid System has a nice robust yet flexible system for generating columns - either fixed or fluid. It really encourages a modular approach to your styling which is my personal preference. I don't usually use what it generates out of the box though, I modify it to suit.

http://960.gs/

Here's an example of one with 3 columns:

http://www.spry-soft.com/grids/grid/?column_width=300&column_amount=3&gutter_width=20

There are lots of great alternatives to this of course, like the yahoo Grid Builder:

http://developer.yahoo.com/yui/grids/builder/