Width problem

I have a basic layout of 100% width header and a lefthand navigation that is 125px wide. I want the content section (its is to the right of the nav and below the header) to take up 100% of the remaining space. I am having problems with this. The content section either extends too far or it doesn't extend far enough.

The code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title></title>
 <style>
 body {
background: #78d0ff;
color: #000080;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
width: 100%;
}
h1 {
font-size: 28px;
margin-top: 3px;
}
h1.main {
color: #000080;
text-align: center;
}
h2 {
font-size: 24px;
margin-top: 3px;
}
h2.main {
margin-bottom: 0;
text-align: center;
}
h3 {
font-size: 22px;
margin-top: 3px;
}
h3.main {
margin-bottom: 0;
text-align: center;
}
h4 {
font-size: 18px;
margin-top: 3px;
}
h5 {
font-size: 15px;
margin-top: 0;
}
h6 {
font-size: 13px;
margin-top: 3px;
}
html>body #navcontainer li a {
width: auto;
}
img.logo {
height: 100px;
vertical-align: middle;
width: 350px;
}
p {
margin-left: 5px;
}
#content {
background: #fff;
height: 100%;
left: 125px;
position: absolute;
top: 100px;
z-index: 5;
}
#header {
background: #000080;
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#navcontainer {
left: 0;
top: 100px;
background-color: #000080;
color: #333333;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0 0 10px 0;
position: absolute;
width: 125px;
z-index: 10;
}
#navcontainer li {
border-bottom: 1px solid #000080;
margin: 0;
}
#navcontainer li a {
background-color: #2175bc;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
color: #ffffff;
display: block;
font-size: 12px;
padding: 3px 3px 3px 6px;
text-decoration: none;
width: auto;
}
#navcontainer li a:hover {
background-color: #2586d7;
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
color: #fff;
}
#navcontainer ul {
border: none;
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
 <div id="header">
 <img src="logo.png" class="logo" alt="GamerZ Place" />
 </div>
 
 <div id="navcontainer">
 <ul id="navlist">
<li><a href="faqs.html">Link</a></li>
<li><a href="Link">Link</a></li>
<li><a href="Link">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="Link.html">Link</a></li>
<li><a href="link.html">Link</a></li>
 </ul>
 </div> 
 
 <div id="content">
 <h1 class="main">text text text
 </div>
 
</body>
</html>

Width problem

Getting the width to the right size

Ryan8720

Gandalf

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week