CSS, floating div en inherited height

[BLACKfm]

Hallo,

Ik probeer 2 divjes naast elkaar te krijgen welke in een container zitten zodat ze in het midden van de website blijven.

De standaard zou dan ongeveer zijn:

code:

.container {
    width:900px;
    margin-left: auto;
    margin-right: auto;
}

.links {
    float:left;
    width:450px;
}

.rechts {
    float:right;
    width:450px;
}

<div class="container">
    <div class="links">
        <p>Hallo, ik ben links </p>
    </div>
    <div class="rechts">
    <p>Hallo, ik ben rechts</p>
    </div>
</div>

Aan de achtergrond (container) hang ik een border en een achtergrondkleur en deze moet een hoogte hebben van 100% (browservullend). Deze extra css dat lukt allemaal nog, máár het probleem is dat als de het browserscherm te klein is en de tekst uit de div loopt de achtergrond niet mee gaat met de hoogte van de onderliggende divjes.

Nu wil ik er dus eigenlijk voor zorgen dat de achtergrond altijd, minimaal, de zelfde hoogte heeft als LINKS (omdat hier de tekst in staat),

Dus plak ik er een inherit hoogte bij aan de container;

code:

.container {
    width:900px;
    height:inherit;     /* deze regel */
    margin-left: auto;
    margin-right: auto;
}

Maar dit werkt niet met floats (dat heb ik in ieder geval begrepen zojuist op internet).
Maar als ik geen float gebruik krijg ik de div 'LINKS' en 'RECHTS' niet naast elkaar, of in ieder geval niet in de zelfde container (RECHTS hangt er dan onder).

Het zal vast heel simpel zijn, maar hoe krijg ik de 2 divs toch naast elkaar waarbij de achtergrond (CONTAINER) een zelfde hoogte krijgt als de LINKS div ?

[Rubenskoo]

Je moet na een float ook weer clear gebruiken. Daardoor kan je de parent div weer zien(in dit geval .container). Zoek ook eens clearfix in google op.

[BLACKfm]

Thanks! Dat heeft mijn probleem opgelost.

[NNF]

Of je zet 'overflow: auto' op de container, dan heb je geen onnodige clearfix-elementen nodig

[ Voor 6% gewijzigd door NNF op 06-01-2013 11:45 ]

[R4gnax]

NNF schreef op zondag 06 januari 2013 @ 11:45:
Of je zet 'overflow: auto' op de container, dan heb je geen onnodige clearfix-elementen nodig

Die heb je tegenwoordig sowieso niet meer nodig:

Cascading Stylesheet:

.bfc:before, .bfc:after {
  clear   : both;
  content : " "; /* space works around Opera contenteditable bug */
  display : table;
}
.bfc { zoom : 1; } /* IE 6/7 */

De anonieme tables die voor de pseudo-elementen gegenereerd worden, creeëren het float-clearing en margin containment effect van een normale block formatting context (BFC). Zo hoef je overflow niet te misbruiken om het aanmaken van een nieuwe BFC te forceren, wat voor problemen kan zorgen als er later ineens een breedte of hoogte gedefinieerd wordt. (Of wanneer je absoluut gepositioneerde elementen hebt die 'naar buiten' uitsteken.)

Onder IE 6 en 7 (voor het geval je die nog moet ondersteunen) is het mogelijk om de effecten van een BFC te bereiken door een element 'layout' te geven. Om dit zonder neveneffecten te doen gebruik je zoom:1. (Dit geeft het element 'layout' en zegt tegelijkertijd dat de inhoud op 1:1 schaal grootte afgebeeld moet worden; ongewijzigd dus.)

[ Voor 8% gewijzigd door R4gnax op 06-01-2013 14:03 ]