Hello all..

I have a site that I'm working on where the site designer is having some CSS layout issues and I'm not able to see what he is doing wrong.

The skinny:

Top Nav
Masthead Image
Container
Left Column
Left Nav
Right Column
Content
Footer

The Problem:

Left Column and Right Column will not line up horizontally. Right column ALWAYS goes below and to the right of left column, REGARDLESS of whether a FLOAT option is used.

I'll admin I need to take some CSS courses or something, so I'm probably missing something.

Problem #2
Firefox(PC) and Safari(Mac) both render a gap at the top where there should not be one.

Any help is much appreciated!

CSS
Code:
/* Hyperion Field Club CSS */

	/* Basic Rules */

body {
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
a:link, a:visited {
	color: #330000;
	text-decoration: underline;
	}

a:hover {
	color: #330000;
	text-decoration: none;
	}
	
.sectiontitle {
	color: #330000;
	font-size: 11px;
	font-weight: bold;
	}
	
.subsectiontitle {
	color: #330000;
	font-size: 11px;
	font-style: italic;
	}

#container {
	width: 760px;
	border: 1px solid #330000;
	background-color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	background: #91b66d url(images/contentbg.gif) top left;
	}
	
	
	
/* Masthead
---------------------------------------------- */

#toprow {
	padding: 0;
	margin: 0;
	background-color: #330000;
	}

#welcome {
	float: left;
	background-color: #330000;
	padding: 5px 0px 5px 5px;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	color: #c93;
	font-size: 12px;
	font-weight: bold;
	}

#masthead {
	width: 760px;
	height: 191px;
	}
	
.mastheadphoto {
	background-image:url(images/masthead.jpg);
	background-repeat: no-repeat;
	}
	

/* Top Navigation
----------------------------------------------- */
#nav {
margin:0;
padding:0;
border-bottom: 5px solid #c93;
background:#330000 url(images/navbg.gif) top left;
}
ul#nav, ul#nav li {
margin:0;
padding:0;
}
ul#nav {
position:relative;
height:25px;
}
ul#nav li {
display:inline;
list-style-type:none;
}

ul#nav li a:link, ul#nav li a:visited {
float:left;
margin-left:1px;
margin-right:1px;
padding:0 9px 2px 9px;
border-top:0px solid #300;
border-bottom:0px solid #300;
background-color:transparent;
color:#fff;
font:11px/21px arial, helvetica, sans-serif;
text-decoration:none;
}
ul#nav li#nav-home a {
margin-left:0px;
}
ul#nav li a:hover {
color:#fff;
background-color:#c93;
border-bottom: 1px solid #c93;
}
ul#nav li a:active {
color:#fff;
background-color:#c93;
background-image:none;
}
body#home ul#nav li#nav-home a, 
body#aboutus ul#nav li#nav-aboutus a,
body#clubhouse ul#nav li#nav-clubhouse a,
body#golf ul#nav li#nav-golf a,
body#tennis ul#nav li#nav-tennis a,
body#pool ul#nav li#nav-pool a,
body#calendar ul#nav li#nav-calendar a,
body#photos ul#nav li#nav-photos a,
body#members ul#nav li#nav-members a {
border-bottom: 2px solid #c93;
margin:0;
color: #300;
background:#c93;
font-weight: bold;
}

/* Content
----------------------------------------------- */

#content {
	margin: 0;
	padding: 0;
	}
	
#leftcolumn {
	float: left;
	padding: 15px;
	margin: 0px;
	}
	
#rightcolumn {
	margin: 0 0 0 200px;
	padding: 15px 15px 15px 0;
	}
	
/* Left Navigation
----------------------------------------------- */

#lnbox {
	width: 170px;
	padding: 0;
	margin: 0;
	}
	
#lnboxtop {
	background-image: url(images/ln_boxtop.gif);
	background-repeat: no-repeat;
	margin: 0;
	padding: 5px 0px 0px 15px;
	height: 25px;
	text-align: left;
	vertical-align: middle;
	}
	
#lnboxmid {
	background-color: #e2f3d1;
	padding: 15px 10px 5px 15px;
	margin: -5px 0 0 0;
	text-align: left;
	}
#lnboxmid ul {
	margin: 0px;
	padding: 0px;
	}
#lnboxmid ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}
#lnboxmid ul li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #300;
	text-decoration: underline;
	line-height: 18px;
	}
#lnboxmid ul li a:hover {
	text-decoration: none;
	}

#lnboxbtm {
	background-image: url(images/ln_boxbtm.gif);
	background-repeat: no-repeat;	
	height: 12px;
	}
/*
ul#sidenav {
	margin: 0px;
	padding: 0px;
	text-align: left;
	}

ul#sidenav li{
	list-style-type: none;
	}

ul#sidenav li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #300;
	text-decoration: underline;
	}
*/
	
	
	
	
	
/* Main Content Area
----------------------------------------------- */
	
#mainbox {
	width: 545px;
	padding: 0;
	margin: 0;
	}
	
#mainboxtop {
	background-image: url(images/contentboxtop.gif);
	background-repeat: no-repeat;
	height: 25px;
	margin: 0;
	padding: 5px 0px 0px 15px;
	text-align: left;
	vertical-align: middle;
	}
	
#mainboxmid {
	background-color: #e2f3d1;
	padding: 0 15px 5px 15px;
	margin: -5px 0 0 0;
	text-align: left;
	position: inherit;
	}
#mainboxmid p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #300;
	font-size: 11px;
	text-align: left;
	line-height: 15px;
	}
	
#mainboxbtm {
	background-image: url(images/contentboxbtm.gif);
	background-repeat: no-repeat;	
	height: 12px;
	}
	

/* FOOTER
----------------------------------------------- */

#address {
	background-color: #e2f3d1;
	border-top: 1px solid #300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #300;
	text-align: center;
	vertical-align: middle;
	padding: 5px 0 5px 0;
	margin: 0;
	width: auto;
	}

#footer {
	background-color: #300;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	padding: 5px 0 5px 0;
	margin: 0;
	width: auto;
	}

HTML
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>Hyperion Field Club</title>
<link href="hfc.css" rel="stylesheet" type="text/css">
</head>
<body id="home">
	<div id="container">
		<div id="toprow">
			  <ul id="nav">
			    <li id="nav-home"><a href="#">HOME</a></li>
				<li id="nav-aboutus"><a href="#">ABOUT US</a></li>
				<li id="nav-clubhouse"><a href="#">CLUBHOUSE</a></li>
				<li id="nav-golf"><a href="#">GOLF</a></li>
				<li id="nav-tennis"><a href="#">TENNIS</a></li>
				<li id="nav-pool"><a href="#">POOL</a></li>
				<li id="nav-calendar"><a href="#">CALENDAR</a></li>
				<li id="nav-photos"><a href="#">PHOTOS</a></li>
				<li	id="nav-members"><a href="#">MEMBERS</a></li>
			  </ul>
		</div>
		<div id="masthead" class="mastheadphoto"></div>
		<div id="content">
			<div id="leftcolumn">
				<div id="lnbox">
					<div id="lnboxtop"><span class="sectiontitle">In This Section</span></div>
					<div id="lnboxmid">
						<ul id="sidenav">
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
							<li><a href="#">nav</a></li>
						</ul>
					</div>
					<div id="lnboxbtm"></div>					
				</div>
			</div>				
			<div id="rightcolumn">
				<div id="mainbox">
					<div id="mainboxtop"><span class="sectiontitle">SECTION:</span><span class="subsectiontitle"> Subsection</span></div>
					<div id="mainboxmid">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo lectus, euismod ut, feugiat sit amet, rutrum ac, tellus. Nam quis neque. Quisque sed enim. Praesent tristique dictum metus. Aenean gravida congue dui. Donec wisi. Curabitur id ipsum nec risus convallis bibendum. Cras facilisis. Nunc rutrum eleifend metus. Vestibulum consectetuer justo ac mauris. Proin pellentesque auctor ipsum. Nulla facilisi. Ut wisi sapien, mollis ac, volutpat sit amet, pharetra sed, eros.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo lectus, euismod ut, feugiat sit amet, rutrum ac, tellus. Nam quis neque. Quisque sed enim. Praesent tristique dictum metus. Aenean gravida congue dui. Donec wisi. Curabitur id ipsum nec risus convallis bibendum. Cras facilisis. Nunc rutrum eleifend metus. Vestibulum consectetuer justo ac mauris. Proin pellentesque auctor ipsum. Nulla facilisi. Ut wisi sapien, mollis ac, volutpat sit amet, pharetra sed, eros.</p>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec justo lectus, euismod ut, feugiat sit amet, rutrum ac, tellus. Nam quis neque. Quisque sed enim. Praesent tristique dictum metus.</p>
				  </div>
				  <div id="mainboxbtm"></div>
				</div>	
			</div>
		</div>
		<div id="address"><strong>HYPERION FIELD CLUB</strong> &bull; 7390 NW BEAVER DRIVE &bull; JOHNSTON, IOWA 50131 &bull; 515.278.4711 </div>
		<div id="footer">&copy; Copyright 2005 Hyperion Field Club. All Rights Reserved.</div>
	</div>
</body>
</html>
Thanks again, in advance, for your help with this MOST FRUSTRATING issue! :-)