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

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:

#wrapper {
    width: 900px;
}
    
.item {
    height: 200px;
    width: 200px;
    margin: 10px;
    float: left;
}

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

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.