Container wil niet meegroeier met de boxen die erin staan

[leoj]

Hoe krijg ik het voor elkaar dat de (zwarte)container "meegroeit" met de langste box (box1, box2 of box3).
De container moet het liefst ook een min-height hebben.


Alvast bedankt,

Leo


#container {
position: relative;
width: 790px;
border: 1px black solid;
margin: 1em auto;
// height: 100%;
min-height: 200px;
background-color: black;
}

#box1 {
position: relative;
width:100px;
height: auto;
background:red;
float: left;
}
#box2 {
position: relative;
width:100px;
height: auto;
background:green;
float: left;
}
#box3 {
width:100px;
height: auto;
background:yellow;
float: left;
}

 

[ScorpionX]

<div id="container">
<div id="box1">.</div>
<div id="box2">.</div>
<div id="box3">.</div>
<br style="clear: both">
</div>

zie bovenstaande. zet <br style="clear: both"> na de "child" divs.

 

[leoj]

Geweldig ScorpionX, werkt perfect, ben ik helemaal blij mee.
Zou je ook willen vertellen wat de clear precies na de box div's doet, want dat is mij niet duidelijk.

 

[ScorpionX]

Weet niet meer hoe het precies zat maar volgens mij betekent die br met clear: both dat aan beide kanten er niks doorheen mag floaten. Waardoor de br naar beneden wordt geduwd en die op zijn beurt weer de container uitrekt.
Zoiets..

http://www.w3schools.com/cssref/pr_class_clear.asp

 

[leoj]

oke dank je wel