Forum Moderators: not2easy
I'm building a page with a left side bar div (160px wide) and a content div to the right of it, which should fill up the rest of the browser window.
If I don't specify width for the content div (or "auto"), it only takes up the minimal amount of space, and content which should be centered within the "content space" is not. If I do specify the width (as 100% or "inherit") then it extends 160 px off the right edge of the window, no matter what the window size (width = 100% + 160px).
How can I have a content div that uses up all the remaining width leftover from the navigation bar, and takes that space regardless of the content within?
Thanks.
The 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a bunch of header divs that work fine>
<div id="content">
<h2 id="pageName">Page Name</h2>
<div align="center" class="story">
a couple of images here
</div>
<div id="siteInfo"><p align="center">Created and Maintained by J.D. Caudle <br />2006</p>
</div>
</div>
<!--end content -->
<div id="navBar">
<a></a>
<a></a>
and so on...
</div>
<!--end navbar -->
</body>
</html>
The relevant CSS:
body{
font-family:"Times New Roman", Times, serif;
height: 100%;
width: 100%;
color:#FFFFFF;
line-height: 1.166;
margin: 0px;
padding: 0px;
background-color:#000000;
}
#navBar{
position: absolute;
width: 160px;
background-image:url(images/menubar.gif);
z-index: 2;
height: 100%;
}
#content{
position: absolute;
min-height: 600px;
height: 100%;
margin-left: 160px;
z-index: 3;
}
#siteInfo{
width: inherit;
bottom: 0px;
font-size: 75%;
padding: 40px 0 10px 0;
z-index: 1;
}
div
You're doing source-ordered content, or trying to, so you should set a top to your #navbar to set it above the #content, and then push the top margin of #content to sit below it.
HTML
<div id="site">
<div id="sidebar"></div>
<div id="content"></div>
</div>
----------------------------
CSS
#site {
width:100%;
}
#sidebar {
width:160px;
float:left;
}
#content {
width:100%;
margin-right:-160px;
float:left;
}
--------------------------------
#site {
width:100%;
}
#sidebar {
width:160px;
float:left;
background-color:#A8A8A8;
height:500px;
}
#content {
margin-left:160px;
background-color:#ECECEC;
height:500px;
}
From the CSS Forum Charter [webmasterworld.com]:
Code dumps provided in response to a question, with no explanations offered, will also be edited as these are no more than "I fixed your code" posts and add little to no educational value to the discussion.
Here's prairiedogj's original problem: because of an absolutely positioned object, it only took up it's required width, not maximum allowable width (rest of viewport.)
Remove absolute positioning from the
#content divIt's pushed the other absolutely positioned object,
#sidebar#sidebarlefttop"Give a man a fish and you feed him for a day. Teach a man to fish... and you feed him for life."
