Ułożenie kontenerów CSS

Witam.

Mam problem z odpowiednim ułożeniem kontenerów na stronie http://mati1988ktesty.za.pl/
Chodzi o to, że:
1) Dwa kontenery szukaj elementu i dodaj element powinny być wyżej.
2) Wysokość strony bez zawartości powinna mieścić się w oknie przeglądarki a na razie muszę zjeżdżać na dół żeby zobaczyć stopkę.
3) Powinna być przestrzeń 10px pomiędzy niebieskim a czerwonym kontenerem.

<div id="head"></div>

<div id="container">
     <div id="mainbox" class="column"></div>
     <div id="sidebox" class="column">
          <div id="find_sidebox">
                 <h3>Szukaj elementu:</h3>

                 <form>
                 <table border=0 class="szukaj">
                 <tr>
                 <td><P ALIGN="CENTER"><input type"text" name="find" size="19" margin="10px"></P></td>
                 </tr>
                 <tr>
                 <td><P ALIGN="CENTER"><input type="submit" value="Szukaj"></P></td>
                 </tr>
                 </table></form>

          </div>

          <div id="dodaj_sidebox">
                 <h3>Dodaj element:</h3>
                 <form><input type="submit" value="Dodaj" class="big"></form>
          </div>

     </div>
</div>
 
 <div id="footer"></div>
 

div#head {
           height: 40px;
           width: 100%;
           background-image: url("topka_bg.jpg");
           background-repeat: repeat-x;
           position: relative;
           margin: 0px;
           }
           
div#find_sidebox {
                 text-align: right;
                 padding-top: 5px;
                 height:100px;
                 width:250px;
                 background-color: #B00007;
                 background-image: url("lupa.gif");
                 background-position: 5px center;
                 background-repeat: no-repeat;
            }
            
div#dodaj_sidebox {
                 text-align: right;
                 padding-top: 5px;
                 height:100px;
                 width:250px;
                 background-color: #099000;
                 background-image: url("plus.gif");
                 background-position: 5px center;
                 background-repeat: no-repeat;
            }
           
div#sidebox {
            width: 250px;
            right: 250px;
            margin-left: -100%;
            height: 100%;
            background-color: blue;
            }
            
div#mainbox {
                width: 100%;
                background: red;
                height: 100%;
            }
            
div#container{
              padding-left:  250px;
              padding-right: 10px;
              height: 100%;
              }

#container .column {
           position: relative;
           float: left;
           padding-top: 1em;
           text-align: justify;
           }
           
#footer {
        clear: both;
        background: grey;
        height: 30px;
}
 

Ad. 2
Możliwe, że dzieje się tak dlatego, że header i footer są poza containerem, który ma 100% height, więc mogą dokładać się do tej wysokości. Sprawdź jak będzie jeżeli stworzysz kolejny container, w którym znajdzie się wszystko, albo ustaw height procentowo dla wszystkich.