CSS Forum

**cruizer** · 04-07-2010, 02:02 AM

I want a multi-column div using a sticky footer. I have the stucky footer figures out, but not the full height mumti-colum. I am racking my brain here. The left column needs to be full height because it will be a colored bar. If you look at the example link below, you can see that when I set it's height (or min-height) to 100% it adds a scrollbar and extends itself past the footer.
I don't know why. Any help would be greatly appreciated!

Working Example:
http://cgsart.com/test/

Code:

html, body {
margin:0;
padding:0;
height:100%;
background: url(images/events_bkgnd.gif) top center;
}
#container {
height:100%;
position:relative;
left:50%;
width:900px;
margin:0 0 0 -450px;
border-left: #705544 2px solid;
border-right: #705544 2px solid;
}
#header {
height: 125px;
border-bottom: #705544 2px solid;
} 
.left {
position:relative;
float:left;
min-height: 100%;
width: 150px;
background: #000000;
}
.right {
position:relative;
float:right;
width:750px;
background: #ffffff;
}
　
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px; /* Height of the footer */
font-size:11px;
color: #000000;
border-bottom: #705544 2px solid;
border-top: #705544 2px solid;
background: #dfd4c3;
}

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events By Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
　
<div id="container">
　
<div id="header"></div><!-- CLOSES HEADER -->
　
<div class="left">Test</div><!-- CLOSES LEFT -->
<div class="right">More Test</div><!-- CLOSES RIGHT -->
　
　
<div id="footer"></div><!-- CLOSES FOOTER -->
　
</div><!-- CLOSES CONTAINER -->
　
　
　
</body>
</html>

Thank you for looking.

**chrishirst** · 04-07-2010, 07:54 AM

because 100% height of root elements is the height of the viewport NOT the hight of "available space"

http://www.candsdesign.co.uk/article...sticky-footer/

**TripleMoons** · 04-07-2010, 09:14 AM

Instead of applying backgrounds to the two columns separately, apply a single background image to the container div. You may need to clear beneath the footer div (div#clear { clear: both;}) to force it to expand the whole way down.

Example.
Image Used.

**cruizer** · 04-07-2010, 11:40 AM

Chris, but it expands the viewport when I put it in.

Triple, I was considering that as a last resort.

**TripleMoons** · 04-07-2010, 01:50 PM

It's the only option I'm aware of that is cross-browser compatible.

**cruizer** · 04-07-2010, 02:39 PM

Well that sucks. You'd really think it would work! if that was my only resort, then it really screws up the other design I am working on. It needs a colored sidebar on the left, and background image in the lower left corner of the right side.

**TripleMoons** · 04-07-2010, 03:16 PM

If you show me the layout I might be able to tell you how to do that as well...

**cruizer** · 04-07-2010, 03:21 PM

I'll let you know when I get to it, it's low on the burner right now.