I was wondering if anyone could help me on this problem. I added up all the widths and borders and still did not get my max width I used...It still has a space. Now if I made the width what its suppose to be, it will move all my content box and move my box below left column. Here is my css code and html code, plus some pics i took. Thanks in advance!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HaloScene - Here To Soothe Your Halo Gaming Needs!</title>
<link rel="stylesheet" type="text/css" href="style4.css" />
<!--[if IE]>
<style type="text/css">
/* Remove the moz hack from IE, and let Safari users cry */
#sidebar1 { margin-right:0 }
#sidebar2 { margin-left:0 }
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="left-img"></div>
<div id="right-img"></div>
<div id="header">
<p id="head-left-img"></p>
<p id="head-mid-img"></p>
<p id="head-right-img"></p>
</div>
<ul id="nav">
<div id="navbox">
<li><a href="index.html">Home</a></li>
<li><a href="http://www.haloscene.com/forums/index.php">Forum</a></li>
<li><a href="media.php">media</a></li>
<li><a href="tourneys.php"> Tourneys </a></li>
<li><a href="rules.php">Rules</a></li>
<li><a href="staff.php">Staff </a></li>
<li><a href="affiliate.php">Affiliate</a></li>
<li><a href="http://www.haloscene.com/forum/sendmessage.php">Contact</a></li>
</div>
</ul>
<div id="left-col">
<div id="topheader">Advertisement</div>
<div id="infoboxleft">f</div>
<script type="text/javascript"><!--
google_ad_client = "pub-5089605872692920";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
//2007-08-05: Halo, Xbox, Xbox 360, gaming, Porn
google_ad_channel = "4768855298+4437467583+8616616922+3835389873+1055212539";
google_color_border = "000000";
google_color_bg = "191919";
google_color_link = "E1771E";
google_color_text = "FFFFFF";
google_color_url = "999999";
google_ui_features = "rc:6";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="right-col">
<div id="topheader">Tourney</div>
<div id="infoboxright">f</div>
</div>
<div id="content">News Content</div>
<div id="footer">
<div id="footer-left-img"></div>
<div id="footer-right-img"></div>
</div>
</div>
</body>
</html>
Code:
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background-image: url(images/bg.png);
background-repeat: repeat;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
color: #FFF;
}
#wrap {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 1000px;
height: 900px;
background-color: #333333;
}
/* Left and right images that extend full page.*/
#left-img{
background-image: url(images/leftcol.png);
background-repeat: y;
float: left;
width: 50px;
height: 900px;
}
#right-img{
background-image: url(images/rightcol.png);
background-repeat: y;
float: right;
width: 50px;
height: 900px;
}
/* End Left and Right*/
/* Begin Left & Right Column */
#left-col{
height: 660px;
width: 173px;
background-color: #272727;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #252525;
padding-top: 0px;
text-align: center;
float: left;
}
#right-col{
height: 660px;
width: 173px;
border-left-style: solid;
border-left-width: 2px;
border-left-color: #252525;
padding-top: 0px;
text-align: center;
background-color: #272727;
float: right;
}
/* END Columns */
/* Begin News Content */
#content{
float: left;
width: 546px;
height: 660px;
text-align: center;
background-color: #272727;
}
Before you post, read our: 
IE Help. Extra Space.
