Bottom alignment???
Posted: Fri Mar 16, 2007 1:19 am
I have the following HTML file and I am trying to get the RED DIV to align to the bottom of the blue container div, much like the black footer is aligned with the screens bottom. I've done this before, but of course I cannot find the code to reproduce how I did this...
Any suggestions?
Here is the code so far:
Any suggestions?
Here is the code so far:
Code: Select all
<!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" lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
min-width: 700px;
}
#wrap {
position: relative;
margin: 0 auto; /* center, not in IE5 */
padding: 0px;
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
}
#head {
height: 80px;
bottom: 0;
background-color: darkblue;
}
#foot {
position: absolute;
width:100%;
bottom: 0;
background-color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head">
<div style="position: relative; background-color: red;">Menu tabs go here</div>
</div>
<div>
Some body stuff
</div>
<div id="foot">
Some footer
</div>
</div>
</body>
</html>