Forum Moderators: not2easy
I am new to css and I am trying to create a layout that has a header div (with 2 child divs) a body div (also with 2 child divs) and a footer. One of the body div's children is the navigation div (fixed width & variable height) and the other should host the content (variable width and height). I am trying to get the middle div and its children to expand/contract depending on the user's resolution. Using width:100% for the child divs works for ie6 of course but not firefox which is the standard for css. I cannot seem to get the body div inside the middle div to expand width-wise and I am having trouble getting the navigation div to expand height-wise. Please see my code below:
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#top {
float:left;
width:100%;
height:117px;
}
#middle {
float:left;
width:100%;
}
#bottom {
float:left;
height:20px;
width:100%;
background-color:orange;
position:relative;
bottom:0px;
left:0px;
}
#one {
float:left;
width:117px;
height:117px;
background-color:#d12421;
}
#two {
float:right;
height:117px;
min-width:683px;
width:683px;
background-color:yellow;
}
#three {
float:left;
width:117px;
min-height:463px;
background-color:grey;
height:100%;
}
#four {
float:left;
min-width:683px;
background-color:green;
}
</style>
</head>
<body>
<div id="top">
<div id="one">logo</div>
<div id="two">other header</div>
</div>
<div id="middle">
<div id="three">navigation</div>
<div id="four">
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
</div>
</div>
<div id="bottom">footer</div>
</body>
</html>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height:100%;
}
#top {
float:left;
width:100%;
height:117px;
}
#middle {
float:left;
width:100%;
height:100%;
position:relative;
top:0;
left:0;
}
#bottom {
float:left;
height:20px;
width:100%;
background-color:orange;
position:relative;
bottom:0px;
left:0px;
}
#one {
float:left;
width:117px;
height:117px;
background-color:#d12421;
}
#two {
float:right;
height:117px;
min-width:683px;
width:683px;
background-color:yellow;
}
#three {
float:left;
position:absolute;
top:0;
left:0;
width:117px;
min-height:463px;
background-color:grey;
height:100%;
}
#four {
min-width:683px;
background-color:green;
width:100%;
}
#content {
margin-left:117px;
}
</style>
</head>
<body>
<div id="top">
<div id="one">logo</div>
<div id="two">other header</div>
</div>
<div id="middle">
<div id="three">navigation</div>
<div id="four">
<div id="content">
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
content<br />content<br />content<br />content<br />
</div>
</div>
</div>
<div id="bottom">footer</div>
</body>
</html>
