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

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.