left content box overlaping the main content box [Archive]

foster10

07-01-2011, 11:36 AM

thats basically my issue guys..
for some reason my left content box keeps overlaping my main content box in which it should be in.

here is the code for it

<!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>
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.gif" />
</div>
<div id="login">
Boston <br />
Offering you the Freedom<br /> of driving
</div>
</div>
<ul id="menu">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="content">

hello<br />
hi
<div id="left">

</div>
</div>

<div id="footer">
© 2011 Boston - <a href="">Terms of use</a>  |  Design By John  
</div>
</div>
</body>
</html>

body
{
text-align: center;
margin: 20px;
background-color: red;
background-repeat:repeat;
height: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background: url(background.png);
}

#container
{
margin: 0 auto;
background-color: white;
width: 798px;
height: 100%;
text-align: left;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 1px solid;
border-color: green;
}

#content
{

margin: 0 auto;
margin: 10px;
background-color: green;
width: 778px;
height: 100%;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid;

}

#header
{
width: 778px;
margin: 0 auto;
margin-top: 10px;
background-image: url(header.jpg);
height: 226px;
}

ul#menu { width: 778px; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0 auto; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }

#logo
{
float: left;
height: 85px;
width: 30%;
font-weight: bold;
color: white;
font-size: 25px;
margin: 5px;
}
#footer
{

margin: 0 auto;
margin-bottom: 10px;
width: 98%;
hight: 80px;
background-color: green;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align: right;
color: white;
font-weight: bold;
}
#login
{
float: left;
height: 85px;
width: 30%;
font-weight: bold;
color: green;
margin-top: 40px;
text-align: center;
}

#left
{
float: left;
height: 100px;
width: 50px;
background-color: red;
}

I will also attach an image of what it looks like.

so please help me.

Thanks in advance