CSS Multiple delimiters with multiple columns
I have a bunch of items (text, image, mixed content, etc.) that I want to display. The user can determine in which row and in which column this element is located. For example, row 1 can have two items / columns, both images. The second row can have three elements / columns, one with an image, the other two as plain text. Oh, and the user can specify the width of any particular column / image / element.
I have a solution that uses multiple tables that works. Essentially, each row is a new table. This works for the most part.
I am wondering if I can only use divs?
Now my CSS foo is missing and I tried to copy examples from the web and I couldn't get it to work. 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 overlaps each other.
I've also tried using "position: relative" but it looks even more rugged.
So, is it possible to use divs for multiple rows and different number of columns?
source to share
They are sure! The main effect (it looks like) you are looking for looks like this:
#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 it will do is set up a fixed width container ( #wrapper
) and fill it with "blocks". Since they each have a fixed width and float to the left, they line up in a grid. Due to the width / margin I set for each, you should get 4 lines. If you need spacers, just put in empty DIVs to get the content in the right row / column.
source to share
The 960 Grid System is designed to meet these goals. Have a look at http://960.gs/ they have many examples of what you can do with the 960.
For unindoctrinated, it defines two types of layouts 12 columns or 16 columns. Each column is a predefined width with predefined grooves in between. Then you can use inline CSS styles to have the div div any number of columns. This is incredibly powerful for layouts where different sections of the page use different layouts.
source to share