CSS Forum

**Wesc** · 09-04-2008, 12:50 PM

So i have been trying to make the transition to CSS-P, unfortunately things haven't been turning out quite as I had hoped. I coded my home page but when i tested it at different resolutions the footer didn't display correctly, so I went back to try and make the basic layout work and that's where I'm stuck.

What I'm trying to do is have a header, a footer and two fixed width columns centered in the page. I can get everything to work apart from the 100% height.

Please someone help! I just can't figure out where I've gone wrong.

Here's the script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background:333;
}

div#clear {
clear:both;
}

div#container {
position:relative;
margin:0 auto;
width:994px;
background:#f0f0f0;
height

!important;
height:100%;
min-height:100%;
}

div#header {
height:79px;
width:994px;
background:#ddd;
}

div#rightcol {
float:right;
width:340px;
height:100%;
min-height:100%;
padding:5px 5px 84px 5px;
background:#356;
color:#fff;
}

div#leftcol {
width:634px;
height:100%;
min-height:100%;
background:#000;
padding:5px 5px 84px 5px;
float:left;
color:#fff;
}

div#footer {
position:absolute;
bottom:0;
height:79px;
width:994px;
background:#cc3333;
}
</style>
</head>

<body>

<div id="container">

<div id="header">header</div>
<div id="clear"></div>

<div id="rightcol">right col</div>
<div id="leftcol">left col</div>
<div id="clear"></div>

<div id="footer">footer
</div>

</div>

</body>
</html>

**wayfarer07** · 09-04-2008, 02:15 PM

There's a sticky about this.

**Wesc** · 09-04-2008, 02:43 PM

Ok, thanks, but it's not that simple. I understand that you have to have the parent container set to 100% for the containing divs to be set to 100%. But with the absolutely positioned footer you have to have the container set to auto or else the footer will ignore the columns content.

So it is either have 100% height columns and don't absolutely position the footer, meaning when you don't have alot of content on the page the footer doean't stay at the bottom of the browser window,

or

Don't have 100% columns and the footer is perfect.

The only solution I can think of is faux columns on the background of the container. I was hoping I had missed something.

**wayfarer07** · 09-04-2008, 02:53 PM

I understand your problem better now. Yes, faux columns is the way to go. They are usually the right solution when you need matching 100% high-seeming columns.

**Wesc** · 09-04-2008, 03:06 PM

Thanks, I appreciate your help. I just felt a little dirty using a background image to do it if i could have just done it with script.

**LadynRed** · 09-04-2008, 03:34 PM

Nothing at all 'dirty' using a background image, it's used all the time and it's perfectly acceptable. You'll learn that a little bit of 'smoke and mirrors' is extremely useful to pull off a layout and there's rarely anything wrong with it.

**wayfarer07** · 09-04-2008, 09:41 PM

There's also a way to do it with JavaScript, by calculating the offsetHeight of each element, but sometimes it can be a bit "jumpy", especially if there is other scripting going on. Usually it is fine, and sometimes I will resort to it in very unusual situations, or when, for example, I am feeling especially lazy and don't want to open anything but my HTML editor.

Unfortunately, doing it with JavaScript requires a bit more knowledge, and you need to be aware of some browser incompatibility issues where the heights will be calculated wrongly if the element is positioned absolutely, for example (in IE).