CSS Multiple multi-column divs

Question

I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item.

I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part.

I'm wondering if I can use just divs?

Now my CSS foo is lacking, and I tried to copy examples from the web, and I haven't been able to get it working. Right now I have something like this:

[for each row]
  [div style="float: none"]
  [for each column]
    [div style="float: left"]
      [content]
    [/div]
[/div]
[br]

But everything is overlapping each other.

I've also tried using "position: relative", but things look even more borked.

So can divs actually be used for multiple rows and different number of columns?

Answer 1

The 960 Grid System is designed to accomplish things just like this. Take a look at http://960.gs/ they have plenty of examples of what you can do with 960.

For the unindoctrinated, it defines two types of layouts 12 column or 16 column. Each column is a predefined width with predefined gutters between them. You can then use the built in css styles to have a div span any number of the columns. It's incredibly powerful for layouts where different sections of the page using different layouts.

Answer 2

They sure can! The basic effect (it sounds like) you're looking for is like so:

<div id="wrapper">
    <div class="item">Something</div>
    <div class="item">Something else</div>
    <div class="item">Something cool</div>
    <div class="item">Something sweet</div>
    <div class="item">Something just ok</div>
</div>

and the CSS would be like this:

#wrapper {
    width: 900px;
}

.item {
    height: 200px;
    width: 200px;
    margin: 20px;
    float: left;
}

So what this would do is set up a fixed-width container (the #wrapper) and fill it with "blocks". Because each has a fixed width and is floated left, they'll line up in a grid. Because of the width/margin I've set for each, you should get 4 per row. If you need spacers, just put in blank DIVs to get the content on the right row/column.