Alguém saberia resolver este problema de alinhamento dos div?

index.css: #geral {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px; /* (20px titulo + 20px campos) / 2 + 10px away */
margin-left: -165px;
}
form#login {
position: absolute;
width: 330px;
height: 17px;
padding: 7px;
background-color: #E1EFFF;
}
div#titulo,
div#logado {
font: 12px verdana;
color: #FFFFFF;
font-weight: bold;
width: 336px;
padding: 4px;
text-indent: 5px;
background-color: #416297;
}
div#usuario,
div#senha {
position: relative;
float: left;
margin-right: 3px;
}
input#usuario,
input#senha {
width: 10em;
}
.campo {
font-size: 10px;
color: gray;
float: left;
text-align: left;
margin-left: 4px;
border: 1px solid #808080;
}
.btn {
float: left;
font: 11px Verdana, Geneva, Arial, Helvetica, Sans-Serif;
color: #336699;
margin-left: 4px;
border: 1px solid;
height: 17px;
}
div#invalido {
clear: both;
font: 10px verdana;
color: #FFFFFF;
font-weight: bold;
width: 340px;
padding: 2px;
text-indent: 5px;
margin-left: -7px;
background-color: #FF5555;
}
.txtNormal {
font: 11px verdana;
position: absolute;
text-align:center;
width: 330px;
height: 17px;
padding: 7px;
background-color: #E1EFFF;
}
div#logado {
text-align:center;
}
a.normalLink:link,
a.normalLink:visited,
a.normalLink:active {
font: 11px verdana;
color: gray;
text-decoration: none;
}
a.normalLink:hover {
font: 11px verdana;
color: white;
color: gray;
text-decoration: underline;
}
Aproveitando…
Qual a diferença de “Verdana, Geneva, Arial, Helvetica, Sans-Serif” e “verdana”?
Valeu… =]