[CSS] DIV's gaan onder elkaar ipv naast elkaar

[Reveller]

Ik probeer een site te bouwen waar ik voor het eerst tables vervang door css elementen. Nu heb ik het volgende probleem:

HTML:

<style>
#body {
    width: 650px;
    margin-left: 15px;
    margin-top: 20px;
    padding: 0px;
}

#leftnav {
    width: 150px;
    padding: 0px;
    float: left;
    background: #cccccc;
}

#main {
    width: 500px;
    float: left;
    padding: 0px;
    background: lime;
}

#main #leftcol {
    width: 200px;
    padding: 0px;
    background: blue;
}

#main #rightcol {
    width: 500px;
    float: right;
    padding: 0px;
    background: red;
}
</style>

<div id="body">
  <div id="leftnav">hoi</div>
  <div id="main">Lorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt 
    ut labore et dolore magna aliqua.
    <div id="leftcol">foto</div>
    <div id="rightcol">beschrijving</div>
  </div>
</div>

Dit ziet er in de browser als volgt uit:


Waarom ziet het er niet zo (ff ge-photoshopped) uit?

[coubertin119]

200px + 500px == 700px, de parent is 500px breed.

Trek je conclusies .

[Reveller]

@coubertin119: heb het aangepast, maar nu ziet het er zo uit:



Waarom staat de rode <div> niet op dezelfde hoogte als de blauwe?

[ Voor 4% gewijzigd door Reveller op 08-04-2004 21:54 ]

[Genoil]

allebeit float:left maken, toch?

[Reveller]

@Genoil: idd ja... dank je!