divs niet naast elkaar. OF links OF rechts

[koozie<3]

Hallo,

Ik ben sinds vanochtend begonnen met de laatste opdracht uit een coldfusion boek.
Deze opdracht luidt: Maak je eigen website!

Dus ik ben enthousiast aan de slag gegaan.
Ik wilde graag werken met divs omdat dit erg makkelijk en overzichtelijk is.

Maar nu willen de verschillende divs (met css gedefineerd) niet meer naast elkaar.
De div met het menu komt netjes op het scherm. maar zodra ik een "content" box ernaast wil plaatsen kan hij alleen maar rechtsboven of onder geplaatst worden

Hieronder vb plaatje met code:

Dit is de cf-code en daaronder css code.

<cfinclude template="header.cfm">

<div id="header" align="center">Games Online</div>
<div id="container" align="center">


</div>
<div id="main" align="left"><a href="index.cfm"><img src="images/button-home.jpg" border="0" /></a><br />
<br />
<a href="register.cfm"><img src="images/button-register.jpg" border="0" /></a><br /><br />
<a href="login.cfm"><img src="images/button-login.jpg" border="0" /></a><br /><br /><br /><br />
<a href="about.cfm"><img src="images/button-about.jpg" border="0" /></a><br /><br />
<a href="overzichtgames.cfm"><img src="images/button-overzicht.jpg" border="0" /></a><br /><br />
<a href="searchgames.cfm"><img src="images/button-search.jpg" border="0" /></a><br /><br />
<a href="aanmeldennieuwsbrief.cfm"><img src="images/button-nieuwsbrief.jpg" border="0" /></a><br /><br />
</div>


<cfinclude template="footer.cfm">


body {
border:none;
background-image: url(images/background.jpg);
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
}

#header {
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color:#0000;
margin-left:30px;
margin-top:20px;
}

#container {
background-image:url(images/content.jpg);
width:800px;
height:600px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:50%;
float:right;

}

#main {
position:relative;
height:305px;
width:220px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
float:left;
}


#bottom {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

(een aantal divs zijn nog niet gedefineerd op de site!!)

voorbeeld site:

Ik denk steeds dat de oplossing zo voor de hand ligt. maar ik zie hem gewoon echt niet.

Hopelijk komt er iemand met de gouden tip!

Alvast bedankt voor het kijken


Groeten:thumb:

 

[moneyandgold]

Je moet je div niet uitlijnen maar laten floaten met de volgende css code:

float:left

succes

 

[koozie<3]

en een bijkomend feit dat ik onderstaand stukje code extra moest verwijderen.
Maar het werkt nu:thumb:.

(Oke niet helemaal maargoed. Wilde de div nog iets meer naar het midden hebben.)

Maar dit is al heel wat dus toch harstikke bedankt:thumb:

margin-top:20px;
margin-left:50%;