Multiple columns/rows in CSS

@ alphaoide – here’s what I’ve tried using the default WP theme. Just to see how it works, I stripped most of the CSS and I’m just trying it out.

http://sekhu.net/wp/

So it seems that the entire block is now far to the left,and there’s a gap between the first two and last two floats. How can I fix it – additionally, they’re awfully stretched (the content side is no bigger than 80% of the entire page) and I have set each block to be 20% of the total so where have I gone wrong?

@ Root – could you explain that a bit more or a link with a visual explanation, it seems to make some sense to me but not that much. Do you mean have #precontent1 and #precontent2 as the main containers, then within #precontent1 have #box1 and #box2 and the same for #precontent2 with #box3 and #box4 but floated right instead of left? Would I apply any css to the main containers, or just the boxes?

Thanks guys

sorry couldn’t edit the above post – time to edit should be longer perhaps, saves bumping a thread.

Ok I’ve implemented roots suggestions to some extent by using containers within containers – it seems to work to a point but there’s two problems:

1) the floats left and right are sitting on each other
2) the two containers are seperated by a gaping hole

Here’s the edited code:

/***** precontent ****/
#rap {
width : 80%;
height: 40%;
margin-right : auto;
margin-left : auto;
clear: both;
}

#precontent1 {
width: 25%;
height: 40%;
text-align : left;
float: left;
clear: both;
}

#box1 {
background-color : #ff3344;
}

#box2 {
background-color : #667;
}

#precontent2 {
width: 25%;
height: 40%;
text-align : left;
float: right;
clear: both;
}

#box3 {
background-color: #444;
}

#box4 {
background-color : #fff;
}

The height didn’t work for some reason. In any case I’m getting closer to the point I want. What worries me now is, if I’m having this many problems just doing the CSS, when it comes to loading specific content into the block, it’s going to bork like hell isn’t it?

Well one step at a time. So I still have a few issues.

Thanks in advance

ok I set a width for all the boxes including the main container – it’s there but not quite. The float on the left and right are now set side by side, but one set is above and another below, with the gap in the middle still remaining.

What’ I’m essentially trying to do is place these boxes inbetween the header and the content so do I need to apply clear both to either of those for the floats to align together?

It’s totally shagged in IE with the right floats disappearing to Neverland causing large scrolling and the main content shifting off to the left.

Cheers

I think I’ve added it to everything – I’ve now got the floats touching but still misaligned, I’ve been playing with the bottom floats as well and they’re proving the same problems.

What is actually the problem with the floats? Is it that I have made them too big, or the rap is too small? I don’t quite get it.

Thanks in advance