Parent DIV i wychodzący poza rodzica child DIV

Witam, mam problem ze stworzeniem szablony strony opartym na div-ach. Problem polega na tym, że menu z poniższego kodu wychodzi poza pole zielone i pomarańczowe. Chciałbym, aby wraz ze zwiększaniem się menu, rozciągało się pole zielone i stopka, tak jak to jest w przypadku tabelek. Proszę o pomoc bardziej doświadczonych ode mnie webmasterów. Pozdrawiam.

<style>
*
{
  margin:0 auto;
  padding:0;
}

#main
{
  position:relative;
  background-color:green;
  width:500px;
  height:30%
}

#top
{
  background:#666;
  height:70px;
  width:100%
}

#menu
{
  background:red;
  width:200px;
  float:left
}

#srodek
{
  background:blue;
  width:300px;
  float:left
}

#stopka
{
  background-color:orange;
  position:absolute;
  width:100%;
  bottom:0
}
</style>



<div id="main">

  <div id="top">top</div>

  <div id="menu">menu<br/>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</div>

  <div id="srodek">srodek</div>

  <div id="stopka">stopka</div>

</div>

Robiąc strony "na divach" musisz przestać myśleć jak o stronie na tabelach, gdzie <td> pozmieniasz na <div> i będzie.

Ta stopka to jakaś porażka. Poczytaj o właściwości clear, absolutnie nie używaj właściwości position: absolute, 99% przypadków jego użycia jest błędne/niepotrzebne.

Dwa floatowane elementy jeżeli mają mieć tą samą wysokość (tło) - to nie takie proste w samym CSS, ale możliwe: http://www.vanseodesign.com/css/equal-height-columns/
Przemyśl jednak czy na pewno Ci to potrzebne. Zazwyczaj nie jest, no chyba, że ktoś robi layout na zasadzie kolorowych kwadratów ;) Jak narysujesz jakiś szablon to zauważysz, że takie rozwiązanie prawie nigdy nie jest potrzebne (przez 4 lata potrzebowałem go dwa razy).

Ale ja takiego rozwiązania, gdzie dwie kolumny (czerwona i niebieska) mają tą samą wysokość naprawdę potrzebuje :) w załączniku szybki rysunek jak chciałbym żeby wyglądało i jak wygląda... tło strony mam szare, a tło kolumn ma być białe... jeżeli nie mają one tej samej wysokości to jakoś nie dobrze to wygląda.

Poprawiony kod (na tyle ile umiałem - z clearami), żeby nie było, że czekam na gotowca:

<style>
*
{
  margin:0 auto;
  padding:0;
}

#main
{
  position:relative;
  background-color:green;
  width:500px
}

#top
{
  background:gold;
  height:70px;
  width:100%;
  margin-bottom:10px
}

#menu
{
  background:red;
  width:150px;
  float:left;
  min-height:500px;
  margin:0 10px 10px 0
}

#srodek
{
  width:340px;
  background:blue;
  float:left
}

#stopka
{
  background-color:orange;
  width:100%;
  clear:both
}
</style>



<div id="main">

  <div id="top">top</div>

  <div id="menu">menu<br/>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>aaaa</div>

  <div id="srodek">srodek</div>

  <div id="stopka">stopka</div>

</div>

Załącznik:

Sprawdź link, który podałem i zaadaptuj jedno z rozwiązań, każde masz szczegółowo opisane.

Dzięki! Problem rozwiązany, zostawiam gotowca, może komuś się kiedyś przyda:

<style>
*
{
  margin:0 auto;
  padding:0;
}

#main
{
  position:relative;
  background-color:green;
  width:500px
}

#top
{
  background:gold;
  height:70px;
  width:100%;
  margin-bottom:10px
}

#wyrownywacz
{
  overflow:hidden;
  background-color:pink;
}

#menu
{
  background:red;
  width:150px;
  float:left;
  margin-right:10px;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

#srodek
{
  width:340px;
  background:blue;
  float:left;
  text-align:center;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

#stopka
{
  margin-top:10px;
  background-color:orange;
  width:100%;
  clear:both
}
</style>



<div id="main">

  <div id="top">top</div>

  <div id="wyrownywacz">
    <div id="menu">menu<br/>menu</br>menu</br>menu</br>menu<br/></div>
    <div id="srodek">srodek<br/>srodek<br/>srodek<br/> srodek<br/>srodek<br/>srodek<br/>srodek<br/>srodek<br/>srodek<br/> srodek<br/>srodek<br/>srodek<br/>srodek<br/>srodek111<br/></div>
  </div>

  <div id="stopka">stopka</div>

</div>