CODEWITHSUNDEEP
htmlcss
Mo.
Mo.

Reputation: 42573

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

How can I do this?

Upvotes: 3

Views: 444

Answers (2)

DHuntrods
DHuntrods

Reputation: 686

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/

Upvotes: 1

desau
desau

Reputation: 3021

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

Upvotes: 1

Related Questions