CSS Column Alignment Firefox

[jcmiller]

Hi. This is not related to a DD script, but I am really stumped on this problem. I have created a 3 column CSS layout with rounded corners, which looks really wierd in Firefox. The problem is the center column (it is supposed to align with the top left column). It looks fine in IE, but once again, it looks horribly in FF - the top center column aligns with the top of the page and the top left corner shows up next to the header.
Here is the url:

revjamillersr.com/dadtemp.html

Here is the CSS:

@charset "utf-8";
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#wrapper {
	width: 900px;
	margin: 0 auto;
}
#header {
	float: left;
	height: 190px;
	width: 900px;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
}
#menu {
	background-image: url(images/menu.gif);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 900px;
	padding-top: 0px;
	margin-top: 4px;
	padding-bottom: 0px;
}
#leftcol {
	float: left;
	height: auto;
	width: 180px;
	margin-top: 4px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
}
#centercol {
	height: auto;
	width: 532px;
	margin-left: 184px;
	margin-top: 4px;
}
#rightcol {
	float: right;
	height: auto;
	width: 180px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	float: left;
	height: 150px;
	width: 900px;
	color: #FFFFFF;
	clear: both;
}
.roundcont1 {
	width: 180px;
	background-color: #445155;
	color: #ffffff;
	margin-top: 4px;
	margin-right: 4px;
	margin-bottom: 0;
	margin-left: auto;
	float: none;
}
.roundtop1 {
	background: url(images/lttr.gif) no-repeat top right;
}
.roundbottom1 {
	background: url(images/ltbr.gif) no-repeat top right;
	clear: both;
}
img.corner {
	width: 15px;
	height: 15px;
	border: none;
	display: block !important;
}
.roundcont2 {
	width: 180px;
	background-color: #445155;
	color: #ffffff;
	margin-top: 4px;
	margin-right: 4px;
	margin-bottom: 0;
	margin-left: auto;
	float: none;
}
.roundtop2 {
	background: url(images/lbtr.gif) no-repeat top right;
}
.roundbottom2 {
	background: url(images/lbbr.gif) no-repeat top right;
	clear: both;
} 
.roundcont3 {
	width: 532px;
	background-color: #262d2f;
	color: #ffffff;
	margin-top: 4px;
	margin-right: 180px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: none;
}
.roundtop3 {
	background: url(images/ctr.gif) no-repeat top right;
}
.roundbottom3 {
	background: url(images/cbr.gif) no-repeat top right;
	clear: both;
}
.roundcont4 {
	width: 180px;
	background-color: #445155;
	color: #ffffff;
	margin-top: 4px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 4px;
	float: none;
}
.roundtop4 {
	background: url(images/rttr.gif) no-repeat top right;
}
.roundbottom4 {
	background: url(images/rtbr.gif) no-repeat top right;
	clear: both;
}
.roundcont5 {
	width: 180px;
	background-color: #445155;
	color: #ffffff;
	margin-top: 4px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 4px;
	float: none;
}
.roundtop5 {
	background: url(images/rbtr.gif) no-repeat top right;
}
.roundbottom5 {
	background: url(images/rbbr.gif) no-repeat top right;
	clear: both;
}

I would greatly appreciate any help.

[bluewalrus]

make each one float:left;. It should make each one float to the left of the other as long as the width of the added up is not over your total wrapper width which it should be 88 pixels under if i did math right.

[jcmiller]

Wow! It worked perfectly. Thanks so much for the quick response!