Site CSS Problem

SP8600

All be it it's not PHP I thought you guys/gals would be able to help me out on this one...

For some reason in the below code it will not allow the background in #mainArea go beyond that of #content which is inside #mainArea... Therefore the background which is pretty much just for the right side is stopping before the end of the side bar if there is more in there than the content area... An idea's why is is occurring?

<?php
  require("php/global.php");
  session_start();
?>
<!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>Kenetik-Solutions</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/sidebar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
  <div id="container">
    <?php include("php/header.php"); ?>
    <div id="mainArea">
      <div id="sidebar"><?php rightNews(); ?><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
<br />
      </div>
      <div id="content">Content for  id "content" Goes Here<br />
      </div>
    </div>
    <div id="footer">
      <?php include("php/footer.php"); ?>
    </div>
  </div>
</div>
</body>
</html>

The CSS

html, body {
	margin: 0px;
	padding: 0px;
	background-image: url(../images/background.jpg);
	background-repeat: repeat-x;
	background-color: #7C92A7;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

#page {
	margin: auto;
	width: 762px;
	background-image: url(../images/pageBg.gif);
	background-repeat: repeat-y;
}
#container {
	width: 740px;
	margin: auto;
}
#banner {
	height: 150px;
}
#footer {
	height: 22px;
	background-image: url(../images/bottomBreaker.gif);
	background-repeat: repeat-x;
	color: #999;
	padding-top: 12px;
	font-size: 10px;
	clear: both;
}
#content {
	padding-right: 262px;
}

#mainArea {
	background-image: url(../images/rightNav.gif);
}
#sidebar dt#heading {
	font-weight: bold;
	font-size: 12px;
	color: #3C4C5C;
	padding-top: 5px;
}
#sidebar dt#link {
	padding-bottom: 3px;
}
#sidebar dt a {
	color: #516579;
	text-decoration: none;
}
#sidebar dt a:hover {
	color: #000;
}

#sidebar dt#more {
	padding-top: 10px;
	padding-bottom: 7px;
	background-image: url(../images/line.gif);
	background-position: bottom;
	background-repeat: repeat-x;
}
#sidebar {
	width: 262px;
	float: right;
}

dagon

the forum for this kind of question is: ClientSide Technologies

johanafm

Not quite correct. The #mainArea background does indeed extend into sidebar, or it would not have extended as far right as it actually does, but #sidebar's height does NOT affect the height of #content (remember it's float: right)

As such, the height of #mainArea is ONLY dependent on the height of #content.

See what happens if you move all your <br/> tags from #sidebar to #content.

Adding a <div style="clear: right"></div>, after #content, will force the height of #mainArea to be whichever is higher of #sidebar and #content.

I recommend using a browser that allows you to inspect elements, such as Firefox with the Firebug addon. Finding such problems as this would take you no less than a few seconds that way.
Another way to see what happens is adding borders to #mainArea, #content and #sideBar, but they can also screw up layout since borders take up space.