CSS: 2 verschillende div's met variabele hoogte naast elkaar

[Wraldpyk]

Hallo,

ik probeer een website te maken waarbij 2 div's naast elkaar een veriabele hoogte hebben. De linker is een navigatie vak, en de rechter een contentvak.

Nu moet het mogelijk zijn dat ze beide variabele hoogtes hebben. Dus met min-height enzo.

Ik weet hoe ik dat moet aanpakken, en met 1 div lukt het me ook prima, maar positioneren met 2 divs lukt me gewoon niet.

Wat betreft de html:

HTML:

<div class="container">
    <div class="navigation">    
        a    
    </div>
    
    <div class="content">
        b    
    </div>
</div>

Hoe kan ik het beste de 2 div's positioneren?

Dit is mijn CSS nu, en dat werkt op dit moment ook wel. Maar als de navigation hoger wordt, kruipt de content ook naar beneden:

Cascading Stylesheet:

.container {
    background-color:#CCCCCC;
    height:100px;
    width:912px;
    height:auto;
    margin:0 auto;
    position: relative;
}

.navigation {
    width:205px;
    height:300px;
    min-height:300px;
    height:auto;
    background-color:#00FFCC;
    position:relative;


}

.content {
    width:612px;
    height:300px;
    min-height:300px;
    height:auto;
    background-color: #0099FF;
    left:300px;
    top:-300px;
    position:relative;

}

Wat is de oplossing?

[Verwijderd]

floating?

[MoietyMe]

Cascading Stylesheet:

.container{
overflow:hidden;
}

.navigation{
float:left;
}

.content{
float:right;
}

Of andersom natuurlijk.

[Wraldpyk]

ah zo, ok bedankt zal het direct even uitproberen.

ben niet zo'n css freak

[BCC]

Ik voel een faux column aankomen

[Gommers]

Vergeet hem niet te verwijderen met een clear

Cascading Stylesheet:

.clear {
clear:both;
}

HTML:

<div class="container">
<div class="navigation">
a
</div>

<div class="content">
b
</div>
<div class="clear"></div>
</div>

[Wraldpyk]

Gommers schreef op dinsdag 12 februari 2008 @ 17:23:
Vergeet hem niet te verwijderen met een clear

Cascading Stylesheet:

.clear {
clear:both;
}

HTML:

<div class="container">
<div class="navigation">
a
</div>

<div class="content">
b
</div>
<div class="clear"></div>
</div>

en dat houdt in?

[NMe]

Hij geeft je toch een testcase om dat te bekijken?

[Gommers]

Beetje googlen... staat duizende keren op internet.

Het verwijderd de float anders loopt de container niet door

[NitroX infinity]

Dat kun je met CSS zelf doen door zoals Good Fella al schreef een overflow aan de container mee te geven. Dan rekt ie vanzelf mee en ben je dus geen extra div nodig.

[ Voor 11% gewijzigd door NitroX infinity op 12-02-2008 20:44 ]

[Gommers]

Kan ook inderdaad, maar overflow is daar volgens mij niet voor bedoeld.

[BlackIce]

NitroX infinity schreef op dinsdag 12 februari 2008 @ 20:42:
Dat kun je met CSS zelf doen door zoals Good Fella al schreef een overflow aan de container mee te geven. Dan rekt ie vanzelf mee en ben je dus geen extra div nodig.

Helaas, hij rekt niet mee.
Overflow: hidden; betekend dat als de content groter is dan de div, de overflowende content verborgen word.
Overflow: auto; zou je kunnen gebruiken, maar dan krijg je een scrollbalk.

De beste optie is (zoals ook al gezegd) faux columns

[NitroX infinity]

@icemancool: bij mij anders wel;

Cascading Stylesheet:

#div_container {
    margin: 0 auto;
    overflow: hidden;
    width: 900px; }

#div_banner {
    float: left;
    width: 900px;
    height: 96px; }

#div_trackers {
    float: left;
    width: 200px; }

#div_news {
    float: right;
    width: 688px; }

#div_footer {
    float: left;
    width: 900px;
    height: 48px; }

http://pherion.netfirms.com
De witte rand van 3 pixels is de border van de container div. (Is overigens het beste zichtbaar bij de banner en de footer.)

[ Voor 7% gewijzigd door NitroX infinity op 12-02-2008 20:53 ]

[BlackIce]

NitroX infinity schreef op dinsdag 12 februari 2008 @ 20:51:
@icemancool: bij mij anders wel;

Cascading Stylesheet:

#div_container {
    margin: 0 auto;
    overflow: hidden;
    width: 900px; }

#div_banner {
    float: left;
    width: 900px;
    height: 96px; }

#div_trackers {
    float: left;
    width: 200px; }

#div_news {
    float: right;
    width: 688px; }

#div_footer {
    float: left;
    width: 900px;
    height: 48px; }

http://pherion.netfirms.com
De witte rand van 3 pixels is de border van de container div. (Is overigens het beste zichtbaar bij de banner en de footer.)

Dat komt niet door de overflow. Je hebt namelijk geen hoogte opgegeven dus de div rekt automatisch in de hoogte.
Probeer er maar eens een woord in te zetten zonder spaties die breder is dan de div. Dan zie je wat overflow in dit geval doet.
wat meer informatie over overflow op w3schools.com

[NitroX infinity]

Ik heb de overflow eruit gesloopt, kijk nog eens op die site (misschien F5 nodig).

Edit. hmm, in IE rekt de container wel mee zonder overflow maar in FF niet

[ Voor 32% gewijzigd door NitroX infinity op 12-02-2008 21:23 ]

[BlackIce]

NitroX infinity schreef op dinsdag 12 februari 2008 @ 21:21:
Ik heb de overflow eruit gesloopt, kijk nog eens op die site (misschien F5 nodig).

Edit. hmm, in IE rekt de container wel mee zonder overflow maar in FF niet

Dat komt omdat in IE de height werkt als min-height.
Als je geen overflow oid in je CSS hebt rekt hij de div dus uit.

Ik wil je bij deze nog een keer aanraden om naar faux columns te kijken.

[BCC]

icemancool schreef op dinsdag 12 februari 2008 @ 22:23:
[...]
Ik wil je bij deze nog een keer aanraden om naar faux columns te kijken.

Woehoe, I was right

[7.01D]

Wanneer je geen hoogte opgeeft, maar wel een breedte, dan dwingt overflow: hidden; de container om in de hoogte op te rekken met de content. De browser heeft als het ware een voorkeur om de content wel te laten zien i.p.v. deze af te breken en dit kan bij gebruik van overflow: hidden; enkel door de container op te rekken.

clear: both;, i.p.v. overflow: hidden; kan ook, maar die zou ik dan ook gewoon op de container zelf zetten i.p.v. een extra lege <div> toe te voegen. Soms moet je dan ook nog float: left; toevoegen. Dat kan natuurlijk voor problemen zorgen, maar hier lijkt me dat niet het geval aangezien je de breedte van je container vast hebt staan.
Die float lijkt wat onzinnig (is ook niet altijd nodig), maar dat geldt ook voor lege <div>s, zeker wanneer die enkel voor de opmaak dienen.

[BlackIce]

Als je geen hoogte opgeeft maar wel een breedte rekt de div altijd met de content mee.
Als hij dat niet doet heeft dat met de flow van de pagina te maken (bijvoorbeeld floats).
Dan kan het wel zin hebben om een float toe te voegen, omdat floatende elementen wel meerekken met de floatende elementen die erin zitten.
Ook absoluut gepositioneerde elementen bijvoorbeeld vallen buiten de flow.
Het is eigenlijk misbruik maken van overflow: hidden;. Die hoort eigenlijk gebruikt te worden als je de overflow juist niet wilt laten zien. (vandaar ook hidden).

[Verwijderd]

icemancool schreef op woensdag 13 februari 2008 @ 13:27:
Als je geen hoogte opgeeft maar wel een breedte rekt de div altijd met de content mee.
Als hij dat niet doet heeft dat met de flow van de pagina te maken (bijvoorbeeld floats).
Dan kan het wel zin hebben om een float toe te voegen, omdat floatende elementen wel meerekken met de floatende elementen die erin zitten.
Ook absoluut gepositioneerde elementen bijvoorbeeld vallen buiten de flow.
Het is eigenlijk misbruik maken van overflow: hidden;. Die hoort eigenlijk gebruikt te worden als je de overflow juist niet wilt laten zien. (vandaar ook hidden).

Toch vind ik het netter om een style (overflow:hidden) te misbruiken dan een html element (clearing div) te misbruiken.

[BlackIce]

Verwijderd schreef op woensdag 13 februari 2008 @ 14:07:
[...]


Toch vind ik het netter om een style (overflow:hidden) te misbruiken dan een html element (clearing div) te misbruiken.

Na even wat zoekwerk gedaan te hebben ben ik het met je eens, er is helaas geen nette oplossing voor.

Voor de TS: overflow: hidden; op je container fixt het probleem. Je moet dan wel zorgen dat de elementen in die container nooit breder worden dan de container, omdat het deel dat erbuiten komt anders gehide word.
Je zou ook overflow: auto; kunnen gebruiken, dan krijg je een scrollbalk te zien als de content breder word dan de container.