Height: 100% difficulty

HTML & CSS
1

I’m having a lot of trouble with my basic 2 column template. My main layout is basic as such:

<body>
<div id="container">
<div id="left"> </ div>
<div id="right"> </ div>
</ div>
</ body>

I want the left and right container to fit 100% of the screen or fit 100% of the content if the content is longer than the page. Also, I would like that if the content exceeds the content of left I would like for left, to equal the same height as right.

body {
	background-color: #1f1e1c;
	height: 100%;
}

#container {
	width: 980px;
	min-height: 100%;
}


#left {
	float: left;
	width: 205px;
	height: 100%;
	background-color: #453d34;
	background-image: url(images/side1.png);
	background-position: bottom;
	background-repeat: no-repeat;
}

#right {
	float: left;
	width: 775px;
	background-color: #d9c494;
	background-image: url(images/up1.png);
	background-repeat: no-repeat;
}

This is what my CSS looks like. I’ve attempted a few variations but neither of them work and neither of them equal or go 100% of the height.

If anyone could help me out with this I’d be very grateful.

Thank you in advance

2

HI,

That won’t work I’m afraid as 100% height doesn’t work like that. Read the CSS faq on 100% height for a full understanding of the issues why you can’t do that and why you shouldn’t use 100% height on inner elements like that.

The easiest way to get equal columns is to use the “faux column” approach and instead of repeating your images on each column just combine them and repeat them vertically on the parent container instead.

There are other ways of creating equal columns using negative margins or [URL=“http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm”]absolute overlays but all require a good understanding of css and require some addition to the mark up.

Read this article on equal columns to understand the issues and possible solutions.

3

Alright, I will look up those methods. Thank you very much.