Layout vak 3 niet onder 1

Hallo, ik heb in een layout 3 content vakken, maar het 3de vak wilt niet onder het andere komen.
Ik heb nu dit:

CSS:

#content_top{
    background-image:url("/images/menu.gif");
    height:35px;
    width:20%;
    float:left;
    border-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    font-size:120%;
    border:1px solid #444444;
    border-bottom:0px;
}
#content_top .font{
    margin-top:8px;
}
#content_top2 .font{
    margin-top:8px;
}
#content_top2{
    background-image:url("/images/menu.gif");
    margin-left:25%;
    height:35px;
    width:75%;
    border-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    font-size:120%;
    border:1px solid #444444;
    border-bottom:0px;
}
#content1{
    background:#666666;
    height:100px;
    width:20%;
    float:left;
    border:1px solid #444444;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
}
#content2{
    background:#666666;
    height:500px;
    width:75%;
    margin-left:25%;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border:1px solid #444444;
}
#content_top3{
    background-image:url("/images/menu.gif");
    height:35px;
    width:20%;
    float:left;
    margin-top:20px;
    border-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    font-size:120%;
    border:1px solid #444444;
    border-bottom:0px;
}
#content_top3 .font{
    margin-top:8px;
}
#content3{
    background:#666666;
    height:100px;
    width:20%;
    float:left;
    border:1px solid #444444;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
}

Dit is de HTML:

<div id="content_top"><div class="font">Hallo</div></div> 
    <div id="content_top2"><div class="font">Hallo</div></div>
    <div id="content1">Hallo</div>
    <div id="content2">Hallo</div>
    <div id="content_top3"><div class="font">Hallo</div></div>
    <div id="content3">Hallo</div>

Het derde vak moet eigenlijk juist hetzelfde zijn maar onder dat andere.

toevoeging op 6 augustus 2012, 11:09:01:
Bedankt

Maak 2 divs, links en rechts met float:left. Maak de linkse 20% breed en de rechtse 75% en zet dan die goede vakken er in.

Zo is het nu toch?

Nee

Ik snap niet wat je bedoeld,

en zet dan die goede vakken er in.

Nu is het wel zoals je zei toch.

de 2 die juist staan zijn net zoals je zei en nu probeer ik die andere daar te zetten maar dat lukt niet.

Style:

#links {
    margin: 0;
    width: 20%;
    float: left;
    }
    
#rechts {
    margin: 0;
    width: 80%;
    float: left;
    }

Html:

<div id="links">
    Alle dingen die links moeten
</div>
<div id="rechts">
    Het grote content
</div>

zoals Ewan zegt, maak het jezelf makkelijker door eerst een div links te maken en dan een div rechts, zet daarin je vakjes. Is veel overzichtelijker en netter dan wat je nu heb. En benoem alles beter, nu is er geen touw aan vast te knopen wat wat is...