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?