Forum Moderators: not2easy
I have a centered 750px div that contains all of the code for my website. That div consists of a header (100% width) and a navigation bar, which goes under the header and is also 100% width. Under the nav bar I have a content area (about 525 px) and a sidebar to the right of that (225px). Theres then a footer that takes up the full 750px.
My problem is the classic "My Sidebar Background Color stops short of the content!" issue. I've tried the suggested "height:100%" fixes, but have had no luck. Here's where I am at now:
CSS
[small]
/* Document Styles */
body {
background: #ccc;
font: normal 10px/16px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
color: #666;
margin: 15px;
text-align: center; /* For IE */
height:100%;
}p {
margin: 0 0 5px 0;
}
acronym {
font-style: normal;
border-bottom: 1px dotted #666;
}
/* Container Styles */
#container {
position: relative;
width: 750px;
background: #fff;
border: 15px solid #fff;
margin: 0 auto;
padding: 0;
text-align: left;
height: 100%;
}
/* Header Styles */
#pageHeader {
width: 750px;
height: 291px;
background: #18d url(images/header.jpg) no-repeat;
}
/* NavBar Styles */
#navBar{
width: 750px;
height: 29px;
border-top: 1px solid #fff;
background: #147;
color: #fff;
}
#navBar ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
clear: left;
}
#navBar li {
float: left;
text-align: center;
}
#navBar a {
display: block;
color: #fff;
font-size: 13px;
text-decoration: none;
background-color: #147;
width: 104px;
height: 29px;
border-right: 1px solid #fff;
line-height: 2em;
}
#navBar a:hover, a:active{
background-color:#148;
}
#navBar #currentpage a {
background: #18d;
}
/* Sidebar Styles */
#sidebar
{
color: white;
padding: 10px;
background: #18d;
float: right;
width: 205px;
border-top: 1px solid #fff;
height:100%;
}
/* Content Styles */
#content
{
border-top: 1px solid #fff;
padding: 10px 10px 10px 0px;
border-right: 1px solid #fff;
width: 504px;
}
/* Footer Styles */
#footer
{
width: 750px;
height: 29px;
border-top: 1px solid #fff;
background: #147;
color: #fff;
}
[/small]
HTML
[small]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Prioritized.net : Home</title>
<link rel="stylesheet" href="style4.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.prioritized.net/index.rdf" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.prioritized.net/rsd.xml" />
</head>
<body>
<div id="container">
<div id="pageHeader">
</div>
<div id="navBar">
<ul>
<li id="currentpage">
<a href="/">Home</a></li>
<li>
<a href="/photos/">Photos</a></li>
<li>
<a href="/archives/">Archives</a></li>
<li>
<a href="/about.php">About</a></li>
<li>
<a href="/links.php">Links</a></li>
</ul>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis lacus. Duis sit amet quam. Sed sapien magna, imperdiet in, pharetra eget, tristique et, purus.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis leo. Quisque ac sem. Phasellus fermentum, orci in scelerisque porttitor, ante augue iaculis ligula, vitae interdum ante nunc eu velit. Vestibulum ut elit. Aliquam ligula. Nunc tincidunt. Nam at enim. Donec ullamcorper sagittis tellus. Suspendisse potenti. Mauris eget felis at odio pretium nonummy. Maecenas eleifend ultricies neque. Nulla porttitor, magna at lobortis vulputate, enim lorem tincidunt risus, ac sollicitudin massa eros sed lacus. Fusce nec risus eget mauris facilisis bibendum. Morbi nisl arcu, facilisis eget, sagittis at, laoreet eget, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis leo. Quisque ac sem. Phasellus fermentum, orci in scelerisque porttitor, ante augue iaculis ligula, vitae interdum ante nunc eu velit. Vestibulum ut elit. Aliquam ligula. Nunc tincidunt. Nam at enim. Donec ullamcorper sagittis tellus. Suspendisse potenti. Mauris eget felis at odio pretium nonummy. Maecenas eleifend ultricies neque. Nulla porttitor, magna at lobortis vulputate, enim lorem tincidunt risus, ac sollicitudin massa eros sed lacus. Fusce nec risus eget mauris facilisis bibendum. Morbi nisl arcu, facilisis eget, sagittis at, laoreet eget, pede.</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
[/small]
As you can see, I have attempted to set the height:100% value on the proper divs (sidebar, container, body). When I do this the page appears almost as expected in IE. The sidebar is overly long, but at least it and the content end at the same place -- this may just be a visual trick because of the white background of container and content...). However, in Firefox the Sidebar div still "stops short". I have attempted to add the height:100% property to HTML tags, but this makes the sidebar run all the way over the footer and out of the container DIV. What Gives?
I appologize for asking such a frequent question, but I really am stumped! Thanks in advance for your assistance.
because a float is removed from the flow it cannot know what height it's 'container' is so the height "fixes" will not work very well.
the suggested workaround is to use a "faux column" image to make it look like it's there
background: #18d;
width: 205px;
make a solid graphic 205px wide, 1-2px high will do in the same color as your required background then put that image as a background image on the container div positioned to the right and set to repeat-y, it will always be as long as the container then and although the actual sidebar might stop short the color will continue..
or alternatively if the content is always longest you could just set the background color onto the container div and make sure all the other divs have their backgrounds set to cover the containers color too..
Suzy
