harrier_coder

I have a web page with 5 <div> tags to separate the page into areas. A header, body, sidebar, content and footer. The sidebar and content <div>s are children of the body <div>. Pretty common I would think. Here's the problem. The sidebar <div> has a larger height than the content <div>. How do I get the content <div> to be the same size as the sidebar All <div>s have a background color that's different and the background color of the content <div> is only a single line. So the area below the content <div> and above the footer <div> is white. Looks bad. I could set the background-color of <body> to that of the content but that looks bad too. I could also set an explicit height of both sidebar and content (which most of the examples I've found on the web do) but sidebar will eventually have dynamic content and I'd rather just let it flow. Some things work in IE but not in FF. Ideas

#header
{
background-color: #26354A;
}

#menuBar
{
padding-bottom: 3px;
padding-top: 3px;
background-color: #ff6600;
}

body
{
margin: 0 0 0 0;
}

#body
{
background-color: #d3dce6;
height: auto;
}

#sidebar
{
color: #FFCC00;
background-color: #26354A;
width: 257px;
float: left;
}

#content
{
background-color: #d3dce6;
width: auto;
}

#footer
{
background-color: #64748B;
clear: left;
}

<!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>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<div id="header" class="header">
Header goes here
</div>
<div id="body" class="body">
<div id="sidebar" class="sideBar">
<br/><br/><br/><br/><br/><br/>
Sample text here.
</div>
<div id="content" class="content">
content
</div>
</div>
<div id="footer" class="footer">&nbsp;</div>
</body>

</html>