Problem z rozjezdzajacymi sie DIVami

[Padrej]

Witam, mam problem nad ktorym juz sie troche glowie i nie moge wpasc na sposob jak to rozwiazac, mianowicie chodzi o to, ze DIV'y ktore zrobilem i wygladaly calkiem tak jak chcialem przestaja wspolpracowac po powiekszeniu/zmniejszeniu przyblizenia w przegladarce ( sprawdzalem na FF, Chrome, rozdz. 1680x1050)

Gdyby ktos mial chwile i wskazal co robie zle, to bede naprawde bardzo wdzieczny!

<style>

<!--



p, a, h1, h2, h3, h4, h5, h6, ul, li, ol {

    margin: 0px;

    padding: 0px;

    text-decoration: none;

}



body {

    background: #f5f5f5;

    margin: 0px;

    padding: 0px;

    font-family: Arial;

    font-size: 12px;

    color: #959595;

}



a {

    color: red;

}



#warpper {

    width: 960px;

    margin: 0 auto;

}









#bg {

    background: #ffffff;

    width: 960px;

    height: auto;

    float: left;

    margin: 50px 0;

    -moz-box-shadow: 0 0 5px 5px #eeeeee;

    -webkit-box-shadow: 0 0 5px 5px #eeeeee;

    box-shadow: 0 0 5px 1px #eeeeee;

}









#logo h1 {

    background: #1b1b1b;

    width: 220px;

    height: 36px;

    float: right;

    padding: 20px;

    margin: 10px 10px 0 0;

    color: #ffffff;

    font-size: 26px;

    font-weight: 400;

    text-transform: uppercase;

}







#menu {

    width: 260px;

    height: auto;

    margin: 10px 10px 10px 0;

    float: right;

}



#menu a {

    background: #f7f7f7;

    color: #959595;

    width: 218px;

    font-size: 12px;

    font-weight: 700;

    float: left;

    padding: 15px 19px;

    margin-bottom: 1px;

    border: 1px solid #e5e5e5;

}



#menu a:hover {

    background: #f1f1f1;

}









#obrazek img {

    width: 670px;

    height: 278px;

    float: left;

    margin: 10px;

}









#sidebar_warpper {

    width: 260px;

    float: left;

    margin-left: 10px

}



#sidebar {

    width: 260px;

    float: right;

    margin-bottom: 10px;

}



#sidebar h1 {

    background: #1b1b1b;

    width: 260px;

    float: left;

    color: #eeeeee;

    font-size: 20px;

    font-weight: 400;

    padding: 10px 0;

    text-align: center;

}



#sidebar p {

    background: #f7f7f7;

    width: 218px;

    font-size: 12px;

    float: left;

    line-height: 20px;

    padding: 20px;

    border-left: 1px solid #e5e5e5;

    border-right: 1px solid #e5e5e5;

    border-bottom: 1px solid #e5e5e5;

}



#sidebar ul {

    background: #f7f7f7;

    width: 258px;

    font-size: 12px;

    float: left;

    list-style: none;

    padding: 0;

    margin: 0;

    border: 1px solid #e5e5e5;

}



#sidebar li {

    width: 218px;

    padding: 12px 20px;

    border-bottom: 1px solid #e5e5e5;

}









#content {

    width: 628px;

    float: right;

    padding: 20px 20px 0 20px;

    margin-right: 10px;

    border: 1px solid #e5e5e5;

}



#content p {

    float: left;

    margin-bottom: 30px;

    line-height: 20px;

    text-align: justify;

}



#content h1, h2, h3, h4, h5, h6 {

    color: #707070;

    width: 100%;

    float: left;

    font-weight: 400;

}



#content img {

   

    margin-bottom: 30px;

}



#content ol, ul {

    float: left;

    padding-left: 20px;

    margin-bottom: 30px;

}



#content li {

    width: 608px;

    margin-bottom: 3px;

}



#content table {

   

    margin-bottom: 30px;

    border-top: 1px solid #c9c9c9;

    border-left: 1px solid #c9c9c9;

}



#content td {

    padding: 10px;

    border-right: 1px solid #c9c9c9;

    border-bottom: 1px solid #c9c9c9;

    color: #959595;

}









#footer {

    width: 670px;

    float: right;

    margin-right: 10px;

}



#footer p {

    width: 670px;

    font-size: 10px;

    padding: 10px 0;

    text-align: center;

}





-->

</style>





<div id="warpper">

<div id="bg">









<div id="logo">

<h1></h1>

</div>









<div id="obrazek">

<img>

</div>











<div id="menu">

<a href>Link</a>

<a href>Link</a>

<a href>Link</a>

<a href>Link</a>

</div>







<div id="content" style="background-color:green;">

<p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>

</div>









<div id="sidebar_warpper" style="background-color:red;">

<p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>

</div>









<div id="footer">

<p><a href><img width=650px; height=65px;></a></p>

</div>





<div id="footer">

<p>TEKST TEKST TEKST TEKST TEKST TEKST TEKST TEKST TEKST TEKST TEKST TEKST</p>

</div>







</div>

</div>

chodzi o to, ze po przyblizeniu/oddaleniu widoku ten zielony div wskakuje nad reszte, a powinien sie trzymac caly czas na poziomie czerwonego.
Bardzo prosze o pomoc i pozdrawiam!

[leggo]

Najwidoczniej elementy, po dodaniu marginesu i padding-u, nie mieszczą się w jednej linii.

 

BTW: Na końcu masz dwa elementy div z id [i]footer[/i].