[CSS] Elementy zlewają się po minimalizacji

[tndek]

Witam. Mam pewien kod CSS, którego fragment prezentuje się tak:

Kod:

html,body{
margin:0;
padding:0
}
body{
font-family:Verdana;
text-align:center;
background:#000 url(img/mocno_szary.png);
color:#fff;}

#naglowek {
text-align:center;
height:60px;

}

#logo{
margin:0px auto;
width:260px;
padding-top:2px;

}
.nazwa {
font-weight:bold;
font-style:italic;
padding-top:2px;
position: relative; right:280px;

}
#logo a {color:#dd9c04; text-decoration:none;}
#logo a:hover {color:#d9c900; text-decoration:none; border-bottom:0px;}

.like {
display:block;
float:right
position: relative; bottom:10px; left:10px;
}

.slogan {
display:block;
float:right;
color:#fff725;
font-size:30px;
font-weight: bold;
font-family: Arial;
position: relative; bottom:100px; right:420px;


}

#menu{
margin:0px auto;
width:740px;
text-align:left;
font-weight:bold;
font-size:12px;
position: relative; bottom:9px;
}

Do uzyskania oczekiwanego efektu tylko takie parametry umożliwiły mi jego wizualizację. Niestety, po zminimalizowaniu okna przeglądarki, klasa .slogan i .like nachodzą na logo&nazwę. W jaki sposób zmodyfikować dane, aby obraz nie przemieszczał się po minimalizacji? Wiem, że parametry są olbrzymie, jednak przy moim obecnym poziomie wiedzy, nie widzę innej alternatywy.

P.S. Tak wygląda plik .php dotyczący problematycznego obszaru:

Kod:

<div id="logo">
<span class="nazwa"><a href="index.php"><img src="/img/szaro_logo.png" alt="basket" title="kosz, sport, sila, masa, bulls, lakers" /></a></span></div>
<span class="slogan"><img src="/img/slogan_d.png"</img> <span class="like"><div id="fb-root"></div><script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script><fb:like href="<?php echo 'http://'.$host.$uri.'/'; ?>" send="false" layout="button_count" width="140" show_faces="false" font="verdana"></fb:like></span></span>