[CSS] Bez tabel

[Stef@n]

Witam,
Zaczynam nowa przygodę z pisaniem stron bez tabel. No i wszystko niby cacy zrobiłem sobie mały szablon, ale są pewnie niedociągnięcia które nie wiem jak poprawić. A w czym problem? No z ustawieniem div. W IE wszystko jest fajnie i tak jak powinno. A w FF niestety jeden div pokrywa się z innym zdjęciem. Podaje link do strony:
http://www.kozuchykorzen.pl

Bardzo proszę o pomoc i różne poprawki oraz komentarze do tego kodu abym mógł pogłębić zagadnienie robienia stron bez tabel.

kod CSS:

Kod:

body {
    background-color: #7390C4; margin-top: 7px; margin-left: 0; margin-right: 0; margin-bottom: 7; font-family: Tahoma; color: #000000; font-size: 12px; }
p.naglowek {
    margin-left: 15px; margin-top: 0px; margin-bottom: 0px; color: #FFFFFF; font-weight: bold; line-height: 22px; }
#top {
    background-color: #FFFFFF; width: 978px; margin: auto; }
#logo {
    width: 84px; height: 70px; padding-left: 30px; float: left; }
#mini_menu {
    width: 200px; float: right; text-align: right; margin-top: 20px; padding-right: 30px; display: run-in;  }
#mini_menu ul {
    display: inline; padding-left: 0px; margin-left: 0px; }
#mini_menu li {
    list-style-type: none; display: inline; padding: 5px; }
#reklama_a {
    background-color: #FFFFFF; width: 960px; text-align: center; margin: auto; margin-top: 5px; margin-bottom: 5px;  }
#menu {
    background-image: url(grafika/bg_menu.gif); width: 960px; margin: auto; line-height: 39px; font-weight: bold;}
#menu ul {
    display: inline; padding-left: 0px; margin-left: 0px; }
#menu li {
    list-style-type: none; display: inline; padding: 17px; }
#lewa_kolumna {
    width: 362px; padding-left: 10px; padding-top: 15px; float: left; }
#logowanie_naglowek {
    background-color: #7390C4; width: 362px; }
#logowanie_formularz {
    background-color: #D2DFEB; height: 150px; width: 362px; }
#informacja {
    padding-top: 15px; height: 150px; width: 362px; }
#prawa_kolumna {
    width: 586px; float: right; padding-right: 10px; padding-top: 15px; }
#tekst {
    width: 960px; padding-bottom: 15px; padding-top: 15px; text-align: justify; margin: auto; }
#logo_stopka {
    width: 58px; padding-left: 30px; float: left;  }
#menu_stopka {
    width: 860px; float: left; text-align: center; padding-top: 7px; }
#menu_stopka ul {
    display: inline; padding-left: 0px; margin-left: 0px; }
#menu_stopka li {
    list-style-type: none; display: inline; padding: 5px; }
#tresc_stopka {
    width: 860px; float: left; text-align: center; padding-top: 5px; }

Z góry dziękuje i czekam na mądre rady.

[Labsta.com]

Witam.
Jeśli dobrze rozumiem to wystarczy:

Kod:

#tekst {clear: both;}

[Stef@n]

Dziękuje Ci bardzo. Mam jeszcze tez prośbę co do mojego kodu czy aby na pewno wszystko jest poprawnie i czy można go jakoś uprościć?

[Labsta.com]

Usuń align="left" border="0" z obrazków i daj to do css


Uprościć można np.

Kod:

margin-top: 7px; margin-left: 0; margin-right: 0; margin-bottom: 7;

do

Kod:

margin: 7px 0px 7px 0px;

Dodatkowo, żeby lepiej poruszać się po CSS uporządkuj właściwości alfabetycznie np.

Kod:

#logo {
    width: 84px; height: 70px; padding-left: 30px; float: left; }

na

Kod:

#logo {
    float: left;  height: 70px; padding-left: 30px; width: 84px;}

bo łatwiej się edytuje.

Może ktoś Ci jeszcze coś dorzuci.

Pozdrawiam