CSS Help>/ this sounds simple but is it?...... where's Eric M

#1 July 20th, 2005, 11:46 PM

Iam trying to get the green footer div to sit on the bottom of all
three divs so as the divs vary in height it sits off the bottom of the
lowest one

I cannot use absolutes because the three colum are dynamically driven
maybe Iam missing something really simple?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://wwww3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title></title>
<style type="text/css">
#bigcontainer {
margin: 0px auto;
width: 768px;
position: relative;
border: thin solid Fuchsia;
}
#left{
width: 164px;
position: absolute;
border: thin solid #00008B;
}
#middle{
left: 169px;
width: 430px;
position: absolute;
border: thin solid Red;
}
#right{
left: 604px;
width: 164px;
position: absolute;
border: thin solid #00008B;
}
#footer{
margin: 0px auto;
clear: both;
width: 768px;
position: relative;
border: thin solid #32CD32;
}
</style>
</head>

<body>
<div id="bigcontainer">
<div id="left"><img src="/" width="164" height="250" alt=""
border="0"></div>
<div id="middle"><img src="/" width="430" height="200" alt=""
border="0"></div>
<div id="right"><img src="/" width="164" height="250" alt=""
border="0"></div>
<div id="footer"> </div>
</div>

</body>
</html>

#2 July 20th, 2005, 11:46 PM

Silky wrote:[color=blue]
> Iam trying to get the green footer div to sit on the bottom of all
> three divs so as the divs vary in height it sits off the bottom of the
> lowest one
>
> I cannot use absolutes because the three colum are dynamically driven
> maybe Iam missing something really simple?[/color]

Absolute positioning takes the element out of the normal flow. That's at
the root of your problem here.

But instead of re-inventing the wheel, work with one of the gazillions
of already existing three-column-with-footer layouts, e.g. this one
here: <http://www.positioniseverything.net/thr.col.stretch.html>

Matthias

What is Bytes?

Popular Articles