Div in een div height auto

[cornelis180]

ik heb een div (wit) met een andere div (content) daarin.

wat ik wil is dat de div (wit) de height even hoog is als die van de content. Maar de height content staat op auto; hoe doe ik dit?

.wit {
background-color:#FFFFFF;
width:970px;
height:100%;
min-height:550px;
border-left: solid 1px #B2D1D7;
border-right: solid 1px #B2D1D7;
}

.content {
float:left;
background-color:#00FF00;
width:620px;
height:auto;
min-height:525px;
margin: 0 auto;
text-align:left;
padding-top:25px;
padding-left:5px;
padding-right:5px;
}

Dit werkt niet. De tekst komt in .content te staan, maar als er heel veel tekst in komt, staat strekt .content wel uit, maar de div .wit niet.

edit: display: inline-block toevoegen is een oplossing, maar dat werkt niet voor alle browsers..

 

[James007]

Laat gewoon bij beide divs de height weg? Dan schaalt alles toch netjes mee?

Als je wil dat je contentdiv (en bijgevolg ook je witte div) een soort minimumhoogte hebben, dan doe je dit bij de contentdiv (en enkel daar).

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

 

[Goeroeboeroe]

Dat komt omdat .content wordt gefloat. Als je iets float, telt het niet meer mee voor de hoogte van de ouder (hier .wit).
Als je al die height en max-height en zo even weghaalt, en als je dan ook de float bij .content weghaalt, schaalt .wit prima mee.
Misschien 'n andere oplossing voor die float zoeken?