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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

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

Post 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" ?
Last edited by Josh1billion on Thu Oct 25, 2007 2:10 pm, edited 1 time in total.
mrkite
Forum Contributor
Posts: 104
Joined: Tue Sep 11, 2007 4:19 am

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

use borders (ala border-right: 145px solid grey) & negative margins (margin-left: -145)...

the only really sweet solution.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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
User avatar
arpowers
Forum Commoner
Posts: 76
Joined: Sun Oct 14, 2007 10:05 pm
Location: san diego, ca

Post by arpowers »

thats exactly what I'm talking about...
:P
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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.
User avatar
Josh1billion
Forum Contributor
Posts: 316
Joined: Tue Sep 11, 2007 3:25 pm

Post 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]
Post Reply