Hello there,

First off, a link to an example:
http://www.stroud.gov.uk/docs/columnsproblem.htm

What I want is that columns 4 5 & 6 appear below columns 1 2 & 3.

I've been playing about with <div>s adding new ones, changing position (absolute/relative etc) but I can't get it to work.

The real page is generated by ASP from a database so the number of items will not always be the same.

Anyone have any ideas?
Cheers
Mike

You need a top property in your second set of column's that's why they are overwriting each other.

But absolute position is the wrong way to go about making stackable columns unless the overflow is set to scroll because you will never know where one column ends or another begins.

The only way I can think of requires a table like setup.

for example:

<div class="row">
 <div class="col"></div>
 <div class="col"></div>
 <div class="col"></div>
</div>
<div class="row">
 <div class="col"></div>
 <div class="col"></div>
 <div class="col"></div>
</div>

.row {
 clear: both;
}
.col  {
 display: inline;
 width: 30%;
}

If it's tabular data, then use tables, as that's what they're meant for.

I did something similar to what you want but it wasn't tabular and I didn't use tables. I used floats and 2 wrappers. 1 wrapper for the top columns, a 2nd wrapper for the bottom columns, floated the columns inside the wrappers. As long as you make sure you CLEAR the floats, then the bottom ones will stay underneath.

Thanks for your replies.

AliKat, I'll have a try with your idea, but it'll have to wait till I get back to work on Monday!


LadynRed, I did try tables to start with, but the problem is I need the data going down the columns rather than across.:
A D G
B E H
C F I
Which is all very well if it's static data, but it's coming from a database in alphabetical order and it needs to be layed out as the little example above.

I might try something like splitting the data into 3 arrays, hmmmmmm....
Have to have a play on Monday morning.

Cheers for now
Mike

Morning!

Just had a look, didn't have time yesterday, and thanks to your idea AliKat I have got it working.

I imagine its the clear:both; on the row div that does the trick, I'd have never come up with that, I'm still poor at CSS!

Looks like I'll be able to produce the report as the bosses want it now!!!


Many thanks
Mike