By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.