Are the "Specials" & "Book" sections always going to be the same height and also the same height as one another? If they aren't, this will not work properly. You can adjust/remove the HEIGHT from the Specials & Books divides and simply rely on text to determine their height, however if they are unequal then the will not BOTH extend to the footer. Thus, the background will display - in any color.
I have NOT done a layout exactly like this and would avoid the double divides because of the height issue -
possibly, someone else may be able to build on my example.
Also, please take out all of the <br>, they are only "messing up" your real view of what your layout is actually doing. I added an #inner-wrap which keeps "special" from aligning too far to the left. I also added CSS to level the field between browsers.
You have also defined id NAV multiple times - it must be a CLASS to be used more than once.
Always try and validate after changes.
http://validator.w3.org/
As LadyinRed has pointed out, your #sidebar divide stops after "Gallery" and does NOT extend to the footer. I was unable to accomplish this - although I don't know why it would need to. By changing the background color, the sidebar APPEARS to extend to the footer.
This is all I know with the information provided.
<!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=utf-8" />
<title>Say It With Music-Home</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code ,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike ,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset, form,label,legend,table,caption,tbody,tfoot,thread ,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
font-weight:normal;
}
body {
background-image: url();
background-repeat: repeat;
background-color: #2071A0;
}
body,td,th {
color: #FFF;
}
@charset "utf-8";
/* CSS Document */
html, body{
margin: 0px;
padding: 0px;
}
#wrapper{
background-color: #FFF;
background-color: #006;
width: 580px;
margin: auto;
}
#header{
background-color: #CC6;
height: 90px;
background-image: url(images/images/logo_04.jpg);
}
#sidebar{
background-color: #006;
width: 120px;
float: left;
background-repeat: repeat-x;
/* height: auto;*/
}
#wrapper #sidebar dl {
padding-left: 10px;
color: #FFF;
text-decoration: none;
padding-top: 20px;
}
#wrapper #sidebar dl
.nav a {
color: #FFF;
text-decoration: none;
font-size: 18px;
line-height: normal;
font-style: normal;
font-weight: 700;
font-family: "Arial Black", Gadget, sans-serif;
}
.nav a:hover {
color: #666;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 0px;
}
#mainpicture{
background-color: #0F0;
width: 460px;
float: right;
background-image: url(images/images/sayitwithmusic_09.jpg);
height: 300px;
}
#recentnews{
background-color: #666;
width: 460px;
float: right;
}
#specials{
background-color: #996;
width:230px;
float: left;
height:200px; /*negotiable*/
}
#book{
background-color: #FF0;
width: 230px;
float: right;
height:200px; /*negotiable*/
}
#footer{
background-color: #909;
height: 55px;
clear: both;
margin: 0px;
padding: 0px;
background-image: url(images/images/sayitwithmusic_11.gif);
background-repeat: repeat-x;
}
#wrapper #footer h5 {
text-align: center;
padding-bottom: 15px;
}
#inner-wrap {
margin-left:120px;
width:460px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="sidebar">
<dl>
<dt
class="nav"><a href="index.html">Home</a></dt>
<dt
class="nav"><a href="about.html">About</a></dt>
<dt
class="nav"><a href="contact.html">Contact</a></dt>
<dt
class="nav"><a href="music.html">Music</a></dt>
<dt
class="nav"><a href="events.html">Events</a></dt>
<dt
class="nav"><a href="rates.html">Rates</a></dt>
<dt
class="nav"><a href="specials.html">Specials</a></dt>
<dt
class="nav"><a href="gallery.html">Gallery</a></dt>
</dl>
</div>
<div id="inner-wrap">
<div id="mainpicture"></div>
<div id="recentnews">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
<div id="specials">
<h3>Specials</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
</div>
<div id="book">
<h3>Book Your Event Today!</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
</div>
</div>
<div id="footer">
<h5>April 26, 2009<br />
Say It With Music 2009</h5>
</div>
</div>
</body>
</html>
