Elementy zlewają się po minimalizacji

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

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:

basket slogan_d.png

[/code]

A może wiecej danych? bo ja wróżką nie jestem i jak te style wyglądają nie potrafię “stworzyć”… chodzi o zagłębienie “slogan” i “like” a najlepiej link do strony gdzie to jest?