waarom werkt deze code niet?

[Tijger81]

Hallo,
Ik wil graag een kader maken waarbinnen van links naar rechts 4 div's zitten. Maar de divs worden allemaal constant links onder elkaar uitgelijnd.
Ze komen niet naast elkaar. Wie kan mij helpen?

html

<div class="container"> 
<div class="advertentie_foto"><a href="http://bluebirdcollections.simpsite.nl/bestelpagina"><img src="http://www.simpsite.nl/upload/72/735/Home/Advertentie_modelauto/SDC1042227.jpg"></a>
</div>
<div class="advertentie_tekstvak">
Blikken speelgoed<Br> 
artikelnummer:2750<br>
<Br>
Omschrijving<br>
Schuco: Wendeauto bespeeld U.S. zone 50 er <Br>jaren compleet met originele sleutel. Germany (werkt goed) 
</div>
<div class="advertentie_prijs">
<b>15,00 Euro</b>
</div> 
<div class="advertentie_bestelknop">
<a href="http://bluebirdcollections.simpsite.nl/bestelpagina"><img src="http://www.simpsite.nl/upload/72/735/Home/Layout site/Bestelknop.jpg"></a></div>
</div>

div.container {
 border: 1px solid #000000; 
 width: 900px; 
height:320px;
position:relative;
 left:20px;
 }
.advertentie_foto {
border: 1px solid black;
position:relative;
top:0px;
left:0px;
width: 250px;
height:300px;
}
.advertentie_tekstvak{
border: 1px solid black;
position:relative;
top:0px;
float:left;
left:20px;
width:350px;
height:250px;
font-family:verdana;
font-size:18px;
}
.advertentie_prijs {
border: 1px solid black;
position:relative;
top:0px;
float:right;
width:150px;
height:120px;
background-color:lightgrey;
}
.advertentie_bestelknop {
border: 1px solid black;
position:relative;
float:right;
left:700px;
top:20px;
}

 

[TimVN]

Wil je meerdere van dit soort pagina's hebben? Dan lijkt het me beter om Unsemantic (of ander front-end framework) te gebruiken.
Het is heel makkelijk te gebruiken.
Het is responsive, dat houdt dus in dat de pagina reageert op de grootte van het scherm van de gebruiker. Zo is je pagina ook goed te bekijken op telefoons etc.