[CSS][HTML] Jak ułożyć divy tak jak chcę? :< Opcje

[Flapper]

No właśnie próbowałem różnych metod ustawiania ale nijak mi nie wychodzi jak chcę...
Mam taki arkusz:

Kod

html, body {
    background-color: #000000;
    color: #18ff00;
    margin: 0;
    padding: 0;
    font-family: System, Terminal;
}

#top {
    width: 1007px;
}

#top1 {
    position: relative;
    float: left;
    background: url(images/1.gif);
    width: 194px;
    height: 216px;
    overflow: hidden;
}
#top2 {
    position: relative;
    background: url(images/2.gif);
    width: 588px;
    height: 216px;
    overflow: hidden;
}
#top3 {
    position: relative;
    background: url(images/3.gif);
    width: 225px;
    height: 716px;
    overflow: hidden;
}

#mid1 {
    position: relative;
    float: left;
    background: url(images/4.gif);
    width: 194px;
    height: 500px;
    overflow: hidden;
}

#mid2 {
    position: relative;
    background: url(images/5.gif);
    width: 588px;
    height: 500px;
    overflow: hidden;
}

#stopka {
    position: relative;
    background: url(images/6.gif);
    width: 1007px;
    height: 39px;
    overflow: hidden;
}

I chciałbym żeby wyglądało to mniej więcej tak:
top1 top2 top3
mid1 mid2 top3
stopka stopka

przy czym te podwójne top3 i stopki mają być pojedynczymi divami.
I nie mam pojęcia jak te divy poukładać w HTML'u i co im w stylu wpisać żeby się tak ułożyło.
Męczę to od wczoraj ale samemu mi się to chyba nie uda. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Liczę na waszą pomoc, z góry dzięki.

Ten post edytował Flapper 27.04.2008, 21:27:28

[batman]

Wersja 1:

[HTML] pobierz, plaintext 
<style>
  #main div {
    border: 1px solid red;
  }
 
  #center, #right {
    float: left;
  }
 
  #footer {
    clear: left;
  }
</style>
 
    <div id="main">
        <div id="center">
            <div id="top">aaaaa</div>
            <div id="middle">bbbbb</div>
        </div>
        <div id="right">ccccc</div>
        <div id="footer">ddddd</div>
    </div>
[HTML] pobierz, plaintext 

Wersja 2:
Ten sam kod HTML.

[HTML] pobierz, plaintext 
<style>
  <style>
  #main div {
    border: 1px solid red;
  }
 
  #center {
    float: left;
    width: 500px;
  }
 
  #main #right {
    margin-left: 500px;
  }
 
  #footer {
    clear: left;
  }
  </style>
</style>
[HTML] pobierz, plaintext 

Oczywiście musisz usunąć obramowanie oraz ustawić odpowiednią szerokość div-ów.
A jeśli chcesz uzyskać efekt, że div "top3" będzie rozszerzał się razem z div-ami "top" i "middle", to napisz. Coś się wymyśli (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)