[HTML/CSS] Nieoczekiwany margines nad stopką

[MoLo]

Witam.

Najpierw zerknij na to: http://morawica.prv.pl/net/index.html

Chcialbym zeby czerwony div'ek znajdowal sie zaraz obok topu, a zaraz pod nimi zeby byla stopka. Nie wiem dlaczego ale nad stopka jest maly margines, ok 2px. Jak go usunac ???
Wiem ze troche za duzo nawrzucalem do stylow, co jest zbedne ?

[Stig]

Przede wzystkim obramowanie elementu zawiera się w jego szerokości, a więc wartość width dla div.calosc powinna byc powiększona o 2. Zastosowanie pozycjonowania relatywnego jest tu kompletnie zbędne - to sam efekt należy uzyskiwać przez zastosowanie marginesów. Aby strona wyświetlała się poprawnie należy także "wyczyścić" floatowanie w elemencie div.stopka. Oprócz tego nie widzę sensowności zerowania margin i padding dla każdego diva z osoba. Poza tym, dla atrybutu float nie istnieje taka wartość jak top. Jeśli chodzi o problem ze stopką w IE, to był już on wielokrotnie poruszany na forum. Rozwiązaniem jest wyzerowanie wielkości czcionki dla danego elementu. Twój arkusz powininien wyglądać następująco:

Kod: Zaznacz cały

div.calosc {
width: 552px;
background-color: #487dcd;
border: 1px solid black;
padding: 0;
margin: 80px 0 0 0;
}
  
div.topek {
height: 330px;
width: 187px;
background-image: url(top.jpg);
float: left;
}
     
div.prawa {
background-color: red;
height: 330px;
width: 363px;
float: right;
}

div.stopka {
clear: both;
height: 15px;
width: 550px;
background: url(stopka.jpg);
background-position: bottom center;
background-repeat: no-repeat;
font-size: 0;
}

[MoLo]

WIELKIE dzięki !!!