Two CSS problems - Webmaster Forum - Web Design, Programming and SEO forums

03-12-2006, 11:26 AM

sketchie

Status: Senior Member
Join date: Jul 2005
Location:
Expertise:
Software:

Posts: 835

iTrader: 1 / 100%

sketchie is on a distinguished road

Two CSS problems

Ok I'll try and keep this simple, I'm having problems with browser compatability as usual when it comes to spacing out layers evenly.

Here's a comparision in each of the browsers I have:

What's wrong is the floating layer to the right.
Firefox is 100% perfect, IE's messed up on both sides of the layer (though more so on the right) and Opera's messed up on the left.

CSS:

Code:

body
{
	font-family: verdana;
	margin-top: 20px;
	text-align: center;
	background-color: #46678c;
}
#container
{
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	background-color: #7aad4b;
	border: 4px #FFFFFF solid;
	text-align:left;
}
#header
{
	font-size: 40px;
	color: #FFFFFF;
	font-family: Arial;
	padding: 10px;
}
#topnav
{
	background-color: #46678c;
	height:30px;
}
#content
{
	margin: 10px;
	width: 500px;
	padding: 10px;
	background-color: #598037;
}
#rightfloat
{
	float: right;
	width: 197px;
	margin: 10px;
	background-color: #598037;
}

Does anyone know how to fix this? It would be greatly appreciated if someone could explain it to me.

Also one quick question: How can I align the height of #content and #rightfloat so they are always the same?