Thank you for replying to my post. I have got passed my previous question and have my site layed out the way I want. My problem now is that if I add content to my divs the content seems to push the div's out of alignment with one another. I have pasted my CSS code and body code below. For example If i add a large amount of text to my <div ="content"> </content> section my page becomes all out of wack especially on a restore of the window to a smaller size. I hope by looking at my code someone can give me some insight how to fix this so that my content stays within the div it was intended to even on a window restore. Any ideas? Thanks I am really stuck here
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style>
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
font-family:Papyrus, Rockwell, Poor Richard, Times New Roman, serif;
}
#wrap {
position:relative;
height:100%;
min-height:100%;
}
* html #wrap {height:100%}
#clearfooter {
clear:both;
height:20px;
overflow:hidden;
}
#footer {
position:absolute;
bottom:0 0 0 0;
height:20px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
}
#left {
background-color:#996600;
float:left;
min-height:100%;
height:100%;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
height:100%;
min-height:100%;
}
#right {
background-color:#00CC00;
float:right;
text-align:center;
width:200px;
height:100%;
min-height:100%;
}
#content {
background-color:#009966;
padding:0;
margin-right:200px;
text-align:left;
height:100%;
min-height:100%;
}
.menu {
Position:relative;
width:100%;
height:30px;
background-color:#006633;
}
* html #right,
* html #content,
* html #main {
height:100%;
min-height:100%;
}
</style>
<body>
<body >
<div id="wrap">
<div id="header">Header</div>
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="content">
<div class="menu">Menu</div>
Currently viewing at 1024X768
Content (If i place a large amount of text here the page does not adjust to the content and my divs become all unorganized.If you do a restore of this page (suqare button next to minimize button in title bar) this content section is placed below my left and right navigation div's. Also the footer of the page is placed outside of the left navigation div rather than directly below it.
This also looks very bad in firefox.
kJJhJdljsdjasdhahsdjajdjasdasdjhskhdkjasdddd
dddddddddddddddddddddddddddddddddddddddddddddddddd dd
dddddddddddddddddddddddddddddddddddddddddddddddddd dddddddd
</div>
<div id="clearfooter">
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
Stacking order
