Arrange multiple divs how best to handle layout.

Question

Basically, what I would like to do is to lay out some divs in a master div to simulate a table.

The only difference is that sometimes a "column" needs to be a different size depending on the "row". So I'm trying to figure out how best to position the divs. Should I float the divs, abs position, etc...

I just thought of another way. Should I make one div per row and then each "column" a span?

Answer 1

You can carry forward your thought of putting a div for each row and span for each column. This will make the arrangement an irregular table, the row-heights are regular and the column-width is irregular.

Answer 2

If you're just wanting to output a small amount of data, why not use a table? Tables are OK for tabular data.

Answer 3

If the data is tabular data (which includes forms IMO), then use a table, that's what the table tag is for, surprisingly enough.

If you want to create columns then you would just float them to the left, and add a padding or margin to separate columns. You can attach multiple classes to each div to target specific situations like making one column a bit wider.

Answer 4

Depending on the content of your "column" using a span for your "column" markup may not work. div is a block-level element, and span is an inline-element. Inline elements cannot contain block-level elements. So semantically, I would recommend against using span.

What you are wanting is basically a grid layout system. There is a CSS3 working draft for this, but naturally it isn't yet implemented. You may want to look at grid layout systems like blueprint, yui-grids or 960gs.

Answer 5

I would say in order to get the div's arranged as a table you'd want to:

Make your master div have CSS style be something like this:

position:absolute;
top:0px;
left:0px;

Your top-left cell would have a style something like this:

position:relative;
top:10px;
left:10px;
width:50px;
height:100px;

This will make the first cell located 10px from the top-left and it would have the dimensions 50px wide and 100px tall.

Next, your top-right cell would have a style like this:

position:relative;
top:10px;
left:70px;
width:50px;
height:100px;

This would position the top-right cell 10px from the top and 70px from the left of the master div (which would be 10px from the right edge of the top-left cell).

You can probably logic out the locations of subsequent cells. make sure your top and left values take into account the total distance from the top and left of the master div.