Page 1 of 1

Matching heights for column classes (CSS)? [SOLVED]

Posted: Tue Oct 16, 2007 2:22 am
by Josh1billion
This is hard to explain, so bear with me... I'm new to CSS.

I have two classes, one for each column (i.e. left column and right column-- the left column is the navigation stuff and the right column is the main text of the page). Each of those two columns has a white background, and the behind the two columns is a black and blue background. Each column class has a min-height field (around 1200 pixels) to make sure they stretch down to at least a certain point on the page.

But if the right column, for example, has more text than the left column (so the right column has more content in it and stretches down a page or two, to a height of say 2000 pixels), their heights will be different. The left column will be at its min-height, while the right column will be at that higher height (2000 pixels in this example).

Is there any way that I can have the left column look at the right column's height and say "oh, right column is at 2000 pixels, so I should increase my height to that, too, rather than stay at 1200 pixels" ?

Posted: Tue Oct 16, 2007 3:20 am
by mrkite
It can be done with a table ;)

If you just want the background to extend to the bottom of the page, you could set the background on the body and have the center well have a different background... and the sidebars inherit body.

Posted: Tue Oct 16, 2007 3:55 am
by Kieran Huggins
The original CSS column techniques are listed here:
http://www.glish.com/css/

There's also the "layout-o-matic":
http://www.inknoise.com/experimental/layoutomatic.php

Posted: Tue Oct 16, 2007 10:03 am
by matthijs
A technique you can also use is "faux columns", using a repeating 1px high X px wide image to create the illusion of full height columns

Posted: Wed Oct 17, 2007 5:12 pm
by arpowers
use borders (ala border-right: 145px solid grey) & negative margins (margin-left: -145)...

the only really sweet solution.

Posted: Wed Oct 17, 2007 6:06 pm
by RobertGonzalez
Stu Nicholls posted a neat little CSS handler for this, if I am understanding your needs properly.

http://www.cssplay.co.uk/layouts/3cols2.html

Posted: Wed Oct 17, 2007 6:22 pm
by arpowers
thats exactly what I'm talking about...
:P

Posted: Thu Oct 18, 2007 8:28 am
by Josh1billion
That looks like what I'm thinking about, but CSS is a little confusing to me since I've barely used it.. :P I'll take a closer look later.

Posted: Thu Oct 25, 2007 2:10 pm
by Josh1billion
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Excellent, it worked. 

For future viewers, here's the solution:

I added this code (taken from the page and modified to make it white instead of another color) to my wrapper class in the stylesheet:

[syntax="css"]
overflow: visible;
background:#FFFFFF none repeat scroll 0%;
display:block;
overflow:visible;
position:relative;
So now I have:

Code: Select all

#wrapper { 
margin : 5px auto 5px auto;
width : 790px;
overflow: visible;
background:#FFFFFF none repeat scroll 0%;
display:block;
overflow:visible;
position:relative;
}

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]