CSS Filter: Can I get some auto-height up in this biach?!

August 17, 2012 10:22 PM

CSS Filter: I have a standard three column layout. I cannot figure out how to get the left and right columns to have a height that automatically stretches to the length of the center column.

My Google-Fu turns up tons of advice on the topic (which hopefully means this is a common problem), but none of it seems to help (even this stuff). I figure the easiest way to explain the situation is just to link to my HTML and CSS (which I hope is kosher).

PS: Ignore the repeating, random content on the page. I'm obviously still very early on in the design process.

posted by JPowers to computers & internet (7 answers total)

I had the same problem a few months ago and used jQuery and a short little function to compare columns of the same CSS class to see which had the largest height, then adjust the others to be the same height. Here's the js -- which for some reason when I paste is removing the tag start and end. In this case the class I used for my column divs was called "column" -- you might have come across this solution elsewhere too. Might not be the best solution but works...

function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

$(document).ready(function() {
equalHeight($(".column"));
});
posted by thorny at 10:30 PM on August 17, 2012 [2 favorites]

2 questions:

1. Is there going to be more content on the page? Content in the left and right columns?
2. Does the resize behavior need to match the current behavior? That is: the center div resizes while the border divs stay the same width and flush left and right.

If NO to both you can solve this problem with a background image. Set your body background to pattern.png and give .center a background of white.
posted by wemayfreeze at 10:45 PM on August 17, 2012

Assuming the goal here is to make the background repeat to the bottom of the page: why not just set the pattern on the body tag instead of the columns?
posted by AlsoMike at 11:06 PM on August 17, 2012

Generally how its done is fake it with background images - ie the 3 columns have a wrapper around them (set to overflow:auto to make sure it wraps around the floated columns) that has a background image that makes it looks like the 3 columns are the same height.

If for some reason that isn't appropriate for your situation, another option is display:table for the wrapper and display:table-cell for the columns. It doesn't work in IE7 and probably some other older browsers but if that isn't a concern it could be a good option for you.
posted by missmagenta at 12:02 AM on August 18, 2012

Assuming that the side columns are empty, you don't really need a 3 column layout—you just need to center the content. You can either set a width for #center, or give it margins. I prefer the former, given the size of monitors these days.

BODY {background:url(img/pattern.png) repeat-y;}
#center {width:960px;margin:0px auto;overflow:auto;background:white;}

If you don't want "Have not see" to have a white background (as in your link), remove background:white from #center and create a new div.

.haveseen {background:white;}

(This is basically what wemayfreeze says above.)
posted by she's not there at 1:12 AM on August 18, 2012 [1 favorite]

Just noticed that this isn't really applicable: "If you don't want "Have not see" to have a white background (as in your link), remove background:white from #center and create a new div."

Should have been:

If you don't want the last selection/whatever to have a white background (as in your link), remove background:white from #center and create a new div for the section that you do want to have a white background."
posted by she's not there at 1:24 AM on August 18, 2012

Equal Height Columns with Gutters (also without gutters)

These two articles have pros and cons of several different methods:
4 Methods For Creating Equal Height Columns In CSS
Fluid Width Equal Height Columns
posted by kirkaracha at 2:05 PM on August 18, 2012