Ausrichten von 3 <div>-Containern?

Question

Ich habe drei <div> Container und ich möchte sie so ausrichten, dass sich einer links auf dem Bildschirm befindet, einer in der Mitte und einer rechts. Zwischen den Containern soll gleich viel Platz bleiben.

Wie kann ich das tun?

Answer 1

Es gibt mehrere Möglichkeiten, dies zu tun, mit Floats oder mit Tabellenlayout. Es herrscht eine Art heiliger Krieg zwischen den Befürwortern von Tabellen und den Befürwortern von Floats. Ich tendiere leicht zum Tabellenlayout, aber beide haben ihre Vorzüge. Ich werde für die tabellarische Seite antworten:

<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>

Hier ist ein Beispiel: http://jsbin.com/axojo

Answer 2

Das 960 Grid System hat ein schönes robustes und dennoch flexibles System für die Erzeugung von Spalten - entweder fest oder fließend. Es ermutigt wirklich einen modularen Ansatz für Ihr Styling, was meine persönliche Vorliebe ist. Ich verwende in der Regel nicht, was es aus der Box generiert, obwohl, ich ändere es zu passen.

http://960.gs/

Hier ist ein Beispiel mit 3 Spalten:

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

Natürlich gibt es viele gute Alternativen dazu, wie den Yahoo Grid Builder:

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