CSS positioning (Absolute, Relative & float)

Hej,

Jeg er igang med at få en bedre forståelse for hvordan CSS positioning virker primært med brug af properties som absolute, relative, float osv.

Jeg har lavet et mindre design med bokse men kan ikke helt få det som jeg gerne vil have. Jeg har følgende <div> bokse i min HTML kode:

<div id="main">

<div id="banner">Banner.</div>

<div id="navigation">The navigation.</div>

<div id="focusarea">Focusarea.</div>

<div id="focusarea2">Fokusarea2.</div>

<div class="clear"></div>

<div id="posts">Posts.</div>

</div>

Problemet ligger i at boksen "posts" ikke kommer til at ligge lige under boksen "Focusarea" hvis jeg har fyldt rigtig meget indhold i "Fokusarea2" boksen ved siden af. Er der meget indhold i "Fokusarea2" boksen bliver "posts" nemlig skubbet ned så bunden aligner med bunden af "Fokusarea2" boksen hvilket jeg ikke ønsker. Det skyldes formentlig den "clear" jeg har lagt ind for at få "posts" ned på næste linie som den jo også skal.

Jeg håber det er en mindre ting der skal rettes i CSS'en og jeg ikke skal ændre så meget. Jeg har prøvet at løse det ved at bruge position:absolute og position:relative men kan ikke rigtig få det til at funke. Håber det kan løses forholdsvist simpelt uden at der skal oprettes andre classes. Det er vigtigt at min CSS er kompatibel med de største browsere hvilken den er nu.

Min CSS ser således ud:

#main {
    margin: 20px auto;
    padding: 0;
    width: 1024px;
    border:3px solid gray;
    background-color:#fff;
    color:#000;}

#banner {
    margin:5px;
    padding:10px;
    width:993px;
    height:100px;
    border:0px;
    background-color:#333;
    color:#FFF;}

#navigation {
    margin:5px;
    padding:10px;
    width:993px;
    border:0px;
    background-color:#333;
    color:#FFF;}

#focusarea {
    float:left;
    margin:0px 5px;
    padding:10px;
    width:708px;
    height:200px;
    border:0px;
    background-color:#333;
    color:#FFF;}

#focusarea2 {
    float:left;
    margin:0px;
    padding:10px;
    width:260px;
    border:0px;
    background-color:#333;
    color:#FFF;}

.clear { /* A CSS class for the property */
  clear:both;}

#posts {
    margin:5px 5px;
    padding:10px;
    width:708px;
    border:0px;
    background-color:#333;
    color:#FFF;}