Hey,
I'm currently coding a layout in DIV's. But it doesn't look good on some places.
The disclaimer is too big, even if I've typed the sizes, and the right navigations are a bit too far up. About 2-5 px's.

Here's the code. What's wrong?
<!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>Untitled</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin: auto;
}
#container {
width: 948px;
margin: auto;
}
#banner {
background-image:url(images/header.gif);
width: 903px;
height: 152px;
}
#djsays {
background-image: url(images/djsays.gif);
width: 878px;
height: 20px;
padding-top: 6px;
padding-left: 70px;
}
#leftcont {
width: 209px;
float: left;
}
#orange_top {
background-image: url(images/orange_top.gif);
width: 200px;
height: 24px;
padding-top: 10px;
}
#orange_mid {
background-image: url(images/orange_mid.gif);
width: 200px;
background-repeat: repeat-y;
padding-left: 7px;
}
#orange_bot {
background-image: url(images/orange_bot.gif);
width: 200px;
height: 6px;
}
#blue_top {
background-image: url(images/blue_top.gif);
width: 200px;
height: 23px;
padding-top: 10px;
}
#blue_mid {
background-image: url(images/blue_mid.gif);
width: 209px;
background-repeat: repeat-y;
padding-left: 7px;
}
#blue_bot {
background-image: url(images/blue_bot.gif);
width: 200px;
height: 6px;
}
#content_box {
width: 547px;
float: left;
margin-top: 3px;
}
#content_top {
background-image: url(images/content_top.gif);
width: 547px;
height: 6px;
}
#content_mid {
background-image: url(images/content_mid.gif);
width: 500px;
background-repeat: repeat-y;
padding-left: 7px;
}
#content_bot {
background-image: url(images/content_bot.gif);
width: 547px;
height: 6px;
}
#disclaimer {
background-image: url(images/disclaimer.gif);
width: 509px;
height: 42px;
padding: 10px;
}
#rightcont {
width: 209px;
float: left;
}
#yellow_top {
background-image: url(images/yellow_top.gif);
width: 200px;
height: 22px;
padding-top: 10px;
}
#yellow_mid {
background-image: url(images/yellow_mid.gif);
width: 200px;
background-repeat: repeat-y;
padding-left: 7px;
}
#yellow_bot {
background-image: url(images/yellow_bot.gif);
width: 200px;
height: 6px;
}
#yellow2_top {
background-image: url(images/yellow2_top.gif);
width: 200px;
height: 23px;
padding-top: 10px;
}
#yellow2_mid {
background-image: url(images/yellow2_mid.gif);
width: 200px;
background-repeat: repeat-y;
padding-left: 7px;
}
#yellow2_bot {
background-image: url(images/yellow2_bot.gif);
width: 200px;
height: 6px;
}
-->
</style></head>
<body>
<!-- Start banner and djsays -->
<div id="container">
<center><div id="banner"></div>
</center>
<div id="djsays"><marquee>
Write your marquee text here
</marquee></div>
<!-- Start left column -->
<div id="leftcont">
<div id="orange_top"><center>
<strong> Header Here
</strong>
</center>
</div>
<div id="orange_mid">Expandable Box </div>
<div id="orange_bot"></div>
<div id="blue_top"><center>
<strong> Header Here
</strong>
</center>
</div>
<div id="blue_mid">This also expands </div>
<div id="blue_bot"></div>
</div>
<!-- End left column -->
<!-- Start center column -->
<div id="content_box">
<div id="content_top"></div>
<div id="content_mid">Content box expands too. This is really fun You can write how much you want to here. Enjoy!</div>
<div id="content_bot"></div>
<div id="disclaimer">Copyright © YOURSITE.com 2008+</div>
</div>
<!-- End center column -->
<!-- Start right column -->
<div id="rightcont">
<div id="yellow_top"><center>Header Here</center></div>
<div id="yellow_mid">Expandable box</div>
<div id="yellow_bot"></div>
<div id="yellow2_top"><center>Header Here</center></div>
<div id="yellow2_mid">Expandable box</div>
<div id="yellow2_bot"></div>
</div>
</body>
</html>
Please Help!