Container Alignment 3 <div>?

Question

I have three containers <div>, and I want to align them with one located to the left of the screen, one in the middle and one to the right. With equal space left between containers.

How can i do this?

Answer 1

There are several ways to do this using float or layout. There was some kind of holy war between supporters of the table and supporters of the float. I lean a little towards the layout of the table, but both have their merits. I will be responsible for the table 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 is an example: http://jsbin.com/axojo

Answer 2

960 Grid System , - , . , . , , , .

http://960.gs/

:

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

, , yahoo Grid Builder:

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