Aloude div positieprobleem

als je links en rechts allebei een float: left; geeft, en een breedte (bij elkaar opgeteld moet dat de breedte van de container zijn). dan zou hij het gewoon moeten doen.

dus:

#container{
width: 800px;
margin: 0 auto;
}
.links {
width: 200px;
float:left;
}
.right{
width: 600px;
float: left;
}
#footer{
margin: 0 auto;
width: 800px;
}

en als je een margin wilt, moet je zorgendat die gehele breedte weer kleiner word. want je kan niet 2 dozen dichter op elkaar duwen, en ze even groot houden tegelijkertijd.

Als je layout fluid is (dus je gebruikt geen vaste waarden, maar %), dan zul je een extra div in die divs moeten zetten en deze dan een padding geven. %en kun je moeilijk pixels vanaf trekken.

Dit werkt niet... de container moet gewoon meegroeien met de grootte van de grootste inner div. Hoe krijg ik dat voor elkaar?

<div id="container">
     <div class="links"></div>
     <div class="rechts"></div>
     <div style="clear: both;"></div>
</div>

<div id="footer"></div>

Zo dan?

Je moet er op letten dat die floats niet gaan werken in IE6. Je moet de margin en padding om 0 zetten voor je iets positioneert.

Hou er ook rekening mee dat er een dubbele margin float bug in zit. IE6 rekent de dubbele margin waardes mee.

Wat je ook kunt doen is om die floats te doen, je container div ene overflow:hidden mee geven.

En je footer moet je clearen.

Dus clear:both;

om een minimale hoogte in te stellen kun je:

min-height:300px;
height:auto !important;
height:300px;