View Full Version : CSS 3 Column Layout Help

06-10-2010, 07:25 PM
Having a little trouble with a 3 column layout i'm trying to create. Can be seen live by clicking here (http://boxesblog.tumblr.com).

I have also attached a screenshot to show what I am trying to do. I can't think of a reason why the boxes aren't spanning over 3 columns or why there is a massive gap where the arrow is, that box should be pushing up as far as I can see.

Any help appreciated...

06-10-2010, 07:33 PM
Firstly you have commented out float:left; from .contentBox but I guess you've just done this whilst debugging or something..

Anyhow when this is not commented out there is no room for the third column because you have miscalculated your widths..

Your #wrapper is set to 920px width
Then each .contentBox is set to 290px width plus 40px left and right padding = 330px total width for each box..

So 3 content boxes would equal 330px x 3 = 990px (too large for #wrapper)

So you either need to reduce the total width of each content box or widen the wrapper!

06-10-2010, 07:39 PM
Yeh I worked that out now. Thanks for the help though! :)

My other problem still exists though, I don't want rows... I want the divs to push up where possible. Any ideas?

06-10-2010, 07:48 PM
I want it to look more like the screenshot than what it does now, I just do not know how to accomplish this style.

06-10-2010, 08:03 PM
Hmm trying to think of a way that may be possible because since things are going from left to right it will only push up on the rightmost box as you can see...

There might be a technique going but I can't think of one maybe somebody else can! The only way I can think is to go in columns but it wouldn't really apply here..

06-10-2010, 08:05 PM
Some general help here. (http://www.exitfegs.co.uk/Sources.html)

This also may help. (http://matthewjamestaylor.com/blog/perfect-3-column.htm)


06-10-2010, 08:05 PM
There is this: http://snippettheme.tumblr.com/

Which does the same in a 2 column layout but I can't figure out how they are doing it...

06-10-2010, 08:15 PM
They are positoning each DIV individually, e.g:

div style="position: absolute; left: 375px; top: 858px;" class="story col2" id="post-589435391"

I think they are getting the height of each DIV via some sort of JS and then using it as the top value..which is a bit scruffy!

06-10-2010, 08:16 PM
Any article in particular? I don't want to spend the rest of my evening reading!

// Edit: Oops, sorry you edited. But that really isn't much use in this instance. :(

I don't think what I want to do is going to be possible, which is a shame. Suppose I better find a work around.

06-10-2010, 08:26 PM
It might be possible as i'm not the total expert so there might be a little trick...

The only way I can think atm is if you put them in columns...

then if you want to keep the post-ordering left to right, if it's wordpress you could develop a special loop so it outputs the 1st post then the 4th post then the 7th post in the loop for the first column then the 2ndpost 5thpost and 8th post in the 2nd column etc...

Or the 2nd alternative is knowing the height of the boxes which would require JS I guess.

06-10-2010, 08:34 PM
Yeh I'm using Tumblr which is the problem as it's not open source so I have no access to files to perform those kind of tasks. All I can use is HTML and CSS with some JavaScript thrown in.

I can limit posts per page, so for instance I can have 12 posts per page. But that doesn't really help me much. It's weird CSS behaviour tbh, I don't really know why it's acting like this anyway. There is no margin getting in the way so it should just slot into that gap (I designed this page this way because I thought this is how it would act!).

06-10-2010, 08:52 PM
The only thing I can think of is to make the content boxes all the same hight and set the overflow to hidden, then make them clickable somehow to take the user to the full content. Shame.