Equal Column Height Using Grid System

Hey guys,

I have a problem that involves making 2 columns equal while using a grid system. Now before you tell me to google it, I did with no luck trying both jquery and css solutions.

Go to SpatialVoid :: Premium Custom Designing and click About on the menu and you’ll see what I mean.

I just need the sidebar to stretch the same length as the content.

Thanks :slight_smile:

Even though you have chosen more difficulty regarding CSS (I personally find a grid system, esp on simple sites, to be over-complicating things), I think the answer for you would be the same as for most others.

You prolly don’t want to do faux columns on the container parent since it actually extends beyond the visual footer… you’d see the colours there.

But for example you could just give ajax that background colour (which you wouldn’t see right now, because main’s floated and ajax hasn’t enclosed those floats yet… but that’s easily CSS’d) and let it slide under the sidebar float (IE may need some help in this).

#ajaxload {
width: 100%; /forces haslayout for IE6/7, makes it wider than main/
overflow: hidden; /wrap floats for everyone else/
background-color: #d3c8d0;
border: solid #6d2056;
border-width: 0 5px; /move the border to the ajax box/
}

remove the border from sidebar since he still won’t be tall enough… instead, put it on main.

#main {
border-left: 1px dashed rgba(109, 32, 86, 0.4);
}

since #main is going to be setting the height of ajax most of the time… this solution is brittle in that if sidebar ever really grows tall, the border will stop at main’s height.

But you are using min-height so if the sidebar stays like that you can just make sure main is always at least as tall as sidebar usually is.

Anyway, code above is not tested and I know IE 6/7 will want something special because of how it deals with static blocks (ajaxload) who are next to floats (sidebar) when that static block as Layout (which we gave it to make it enclose #main) so possibly sidebar will need relative positioning and a positive z-index to clearing sit over ajax.

I really don’t see anything particular about a grid system here that would give you some different options from the usual equal-columns issue.

Good luck.