467,073 Members | 1,260 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,073 developers. It's quick & easy.

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

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">&nbsp;</div>
</div>

</body>
</html>
Jul 20 '05 #1
  • viewed: 1561
Share:
1 Reply
Silky wrote:
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?


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

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

31 posts views Thread by da Vinci | last post: by
4 posts views Thread by Weasel | last post: by
3 posts views Thread by ALKASER266 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.