CSS and containers question.

[definitive]

I'm trying to make a simple page with a sidebar, and having a small issue. The thing starts out like this:

I have a container (wrapper), and inside it I have two other containers (left box, and right box - sidebar). The main container has no background color, the left container is white, and right is blue. The white (left) container has lots of text and images, so it's tall. The blue (right) container does not have a lot of info, so it just floats in the air. Is there a way to make the right container's height variable depending on the overall height of the main container + the white container? I tried height: 100%; but that didn't change anything.

Here's the code:

#container {
	overflow: hidden;
	width: 100%;
}

#leftcolumn { 
	float: left;
	color: #fff;
	padding: 10px;
	width: 600px;
	display: inline;
	position: relative;
}

#rightcolumn {
	background: #0000ff;
	display: inline;
	padding: 10px;
	width: 300px;
	float: right;
	position: relative;
}

html is basic div id's where left + right columns are inside container.

 

[UTclassof89]

to be able to specify 100% height on HTML elements, you have to include the following CSS rule:

html, body{
height:100%;
}

 

[Darth.Titan]

to be able to specify 100% height on HTML elements, you have to include the following CSS rule:

html, body{
height:100%;
}

This will work... kinda. Unfortunately the effect is inconsistent across browsers in my experience. The other way is kind of a cheat, but it gives the illusion of the desired effect:

Make the wrapper background blue as well. The white left container will cover the blue on the left side, but on the right it will look like the side bar is 100% height because it's the same color as the wrapper.

 

[definitive]

Thanks to both of you for your help. I tried UTclassof89 method, but as Darth.Titan stated, there were compatibility issues.

Darth.Titan: I've tried your solution and it worked (basically made a 900px by 1px background for the main container where the left side was white, and right side was blue). Is there a chance that it could cause some compatibility problems down the road for the more recent browsers such as ie7+, firefox 3.5+ and safari 4+, etc.?

 

[manueld]

Thanks to both of you for your help. I tried UTclassof89 method, but as Darth.Titan stated, there were compatibility issues.

Darth.Titan: I've tried your solution and it worked (basically made a 900px by 1px background for the main container where the left side was white, and right side was blue). Is there a chance that it could cause some compatibility problems down the road for the more recent browsers such as ie7+, firefox 3.5+ and safari 4+, etc.?

There shouldn't be any compatibility issues moving forward, that's a fairly standard way to create the effect you are trying to accomplish.

 

[Dunmail]

Thanks to both of you for your help. I tried UTclassof89 method, but as Darth.Titan stated, there were compatibility issues.

Darth.Titan: I've tried your solution and it worked (basically made a 900px by 1px background for the main container where the left side was white, and right side was blue). Is there a chance that it could cause some compatibility problems down the road for the more recent browsers such as ie7+, firefox 3.5+ and safari 4+, etc.?

I've heard of a bug in IE where background images with one of the dimensions being just 1px not displaying properly. You might want to make it 2px high. I haven't seen the bug myself but you never know. I can't remember where I saw the report.

Also 900px isn't particularly wide these days - you could always make the image 2000px wide so as to allow for future changes.

 

[manueld]

I've heard of a bug in IE where background images with one of the dimensions being just 1px not displaying properly. You might want to make it 2px high. I haven't seen the bug myself but you never know. I can't remember where I saw the report.

Also 900px isn't particularly wide these days - you could always make the image 2000px wide so as to allow for future changes.

I agree but would increase the pixel height to 10 instead of just 2. The difference in file size is negligible.

 

[-pete-]

I've heard of a bug in IE where background images with one of the dimensions being just 1px not displaying properly. You might want to make it 2px high. I haven't seen the bug myself but you never know. I can't remember where I saw the report.

Also 900px isn't particularly wide these days - you could always make the image 2000px wide so as to allow for future changes.

The width doesn't really matter if you clamp it in place ie...

 #container
{
       background:   #fff url("/images/blue.jpg") repeat-y left top;
}

An area the size of blue.jpg will be blue stretching the height of your page, the rest will be white

 

[brisbaneguy29]

If you want to make all your columns fill to equal height of the tallest column, use CSS. Add some padding to the bottom of the containers and take it away with negative margin. The amount you apply is arbitrary, make it what ever you like, just as long as it is more than the tallest column will ever be. This will make equal height columns, with the height of the content of the tallest one.

#container {
	overflow: hidden;
	width: 100%;
}

#leftcolumn { 
	float: left;
	color: #fff;
	padding: 10px 10px 2000px 10px;
        margin: 0 0 -2000px 0;
	width: 600px;
	display: inline;
	position: relative;
}

#rightcolumn {
	background: #0000ff;
	display: inline;
	padding: 10px 10px 2000px 10px;
        margin: 0 0 -2000px 0;
	width: 300px;
	float: right;
	position: relative;
}

No need for background images and works in all browsers.

 

[definitive]

If you want to make all your columns fill to equal height of the tallest column, use CSS. Add some padding to the bottom of the containers and take it away with negative margin. The amount you apply is arbitrary, make it what ever you like, just as long as it is more than the tallest column will ever be. This will make equal height columns, with the height of the content of the tallest one.

#container {
	overflow: hidden;
	width: 100%;
}

#leftcolumn { 
	float: left;
	color: #fff;
	padding: 10px 10px 2000px 10px;
        margin: 0 0 -2000px 0;
	width: 600px;
	display: inline;
	position: relative;
}

#rightcolumn {
	background: #0000ff;
	display: inline;
	padding: 10px 10px 2000px 10px;
        margin: 0 0 -2000px 0;
	width: 300px;
	float: right;
	position: relative;
}

No need for background images and works in all browsers.

thanks, i'm gonna give it a try on my next project.