[CSS] div moet grootte krijgen van child div

[com2,1ghz]

Hey, Nou zit ik met het volgende probleem. Het gaat om 3 divjes en hun height:



Wat gebeurt er nou?
Als ik main_content(zwart) height auto geef dan wordt hij 0px hoog.
Als ik right_content(groen) heigth 100% geef dan wordt hij 0px hoog tenzij ik main_content(zwart) een fixed size geef dan wordt hij net zo groot.

Left_content(rood) groeit mee met de content maar de rest niet.

Aangezien het een uitrekbare site wordt kan ik geen fixed size gebruiken.

HTML:

<div id="main_content">
     <div id="left_content"></div>
     <div id="right_content"></div>
</div>

Ik heb een aantal oplossingen gevonden op internet maar dat wordt gedaan door vieze hacks wat ik overbodig vind.
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

Dit kan makkelijker denk ik. Wat denken jullie?

[Saeverix]

Ik weet niet hoe het er grafisch uit gaat zien, maar als ik het zo lees heb je wel wat aan Faux Columns.
http://www.alistapart.com/articles/fauxcolumns/

[com2,1ghz]

Ik neem die faux colomns even door

[_Thanatos_]

Een van de twee (of beide, als dat lukt) content-blokken laten floaten, en de main_content overflow:hidden geven. Dat zorgt ervoor dat hij als het ware ruimte voor de floats reserveert en dus niet kleiner wordt dan de ruimte die ze willen hebben

[Verwijderd]

Inderdaad faux columns, of anders dit:

http://www.cssnewbie.com/equal-height-columns-with-jquery/

[BtM909]

Verwijderd schreef op dinsdag 24 augustus 2010 @ 11:49:
Inderdaad faux columns, of anders dit:

http://www.cssnewbie.com/equal-height-columns-with-jquery/

Doe je alleen als je geen parent container wilt / nodig hebt Zou voor het voorbeeld van TS geen JS willen gebruiken

[Bosmonster]

Ik ben ook geen voorstander van dit soort layout issues oplossen met Javascript. Het is iets dat in eerste instantie goed opgepakt dient te worden door de webdesigner, die moet weten wat wel en niet goed mogelijk is. Daarnaast is er de prima faux column optie als het wel een keertje nodig is.

[com2,1ghz]

_Thanatos_ schreef op dinsdag 24 augustus 2010 @ 00:02:
Een van de twee (of beide, als dat lukt) content-blokken laten floaten, en de main_content overflow:hidden geven. Dat zorgt ervoor dat hij als het ware ruimte voor de floats reserveert en dus niet kleiner wordt dan de ruimte die ze willen hebben

Dit is goeie shit. Na een tijd lopen te kloten op mn werk en thuis met kleine websitejes ben ik erachter gekomen dat dmv overflow:hidden de grootte van de child div pakt die float.

[dj_vibri]

com2,1ghz schreef op woensdag 06 april 2011 @ 13:17:
[...]

Dit is goeie shit. Na een tijd lopen te kloten op mn werk en thuis met kleine websitejes ben ik erachter gekomen dat dmv overflow:hidden de grootte van de child div pakt die float.

8 maanden lopen kloten?

[com2,1ghz]

dj_vibri schreef op woensdag 06 april 2011 @ 14:01:
[...]


8 maanden lopen kloten?

Hahah nee met deze site had ik het heel dom opgelost met static afmetingen. Een paar maanden terug had ik een hele website gevonden over floatings. Laatst bedacht ik me dus dat dit probleem hiermee opgelost zou worden. Ik dacht even om jullie up to date te houden zodat anderen er ook wat aan hebben

[R4gnax]

com2,1ghz schreef op woensdag 06 april 2011 @ 13:17:
[...]

Dit is goeie shit. Na een tijd lopen te kloten op mn werk en thuis met kleine websitejes ben ik erachter gekomen dat dmv overflow:hidden de grootte van de child div pakt die float.

Nee. Dat is niet wat er gebeurt. Dat is alleen wat er lijkt te gebeuren.

Die overflow truc maakt gebruik van een curieus randgeval in het CSS formatting model, waarbij een zgn. containing element zichzelf oprekt om (alleen!) floating elementen te omvatten die onderdeel uit maken van de zgn. block formatting context opgespannen door dat containing element.

Zie ook: CSS2.1 Specifcation, 10.6.6 Visual formatting model details; Complicated cases


Het is veel beter om met behulp van de :after pseudo-selector 'on the fly' een clearing element te creeëren voor je container. Dat is een stuk robuuster en heeft geen rare bijwerkingen, zoals het zetten van overflow:hidden dat wel heeft.

[Verwijderd]

:after is inderdaad een erg mooie oplossing. Echter, dit wordt pas van versie 8 ondersteund in Internet Explorer.

[Bosmonster]

Daar zijn ook wel weer expression-hacks voor.

Persoonlijk houd ik het nog even op overflow:hidden. Die rare bijwerkingen heb ik nog nooit last van ondervonden.

[R4gnax]

Verwijderd schreef op vrijdag 08 april 2011 @ 10:40:
:after is inderdaad een erg mooie oplossing. Echter, dit wordt pas van versie 8 ondersteund in Internet Explorer.

In IE6/7 steekt het formatting model zo in elkaar dat het forceren van een block formatting context hetzelfde doet als het invoegen van een element met een clear:both.

Een block formatting context is heel eenvoudig te forceren door een element 'layout' te geven, wat je zonder bijwerkingen kunt doen met de CSS zoom instelling. Hoewel het vroeger een MS specifieke eigenschap was, is zoom tegenwoordig zelfs onderdeel van één v/d CSS3 modules en zou het dus zelfs valideren (voor als je echt zo'n piet lut bent).

Bosmonster schreef op vrijdag 08 april 2011 @ 10:57:
Die rare bijwerkingen heb ik nog nooit last van ondervonden.

Als je een pagina stijl hebt of wilt hebben waar sommige elementen deels buiten een kolom uitsteken m.b.v positionering, dan heb je al een probleem. Met overflow: hidden gaat dat al niet werken.

Als je side-by-side kolommen per sè nodig hebt, ook op geprinte pagina's, kun je ook problemen krijgen. Content kan weg vallen omdat elementen met overflow: hidden niet volledig afgedrukt (hoeven te) worden.

Als je IE6 moet ondersteunen i.c.m. met een CSS min-height kun je niet meer dankbaar gebruik maken v/d stretch-to-fit bug die zorgt dat height zich als min-height gedraagt. Het stretch-to-fit gedrag verdwijnt bij overflow: hidden.

[Bosmonster]

Ik weet wel wat ze zijn, maar heb er nog nooit last van ondervonden

[_Thanatos_]

Ik heb er weleens last van gehad, ook al noemde ik zelf de overflow:hidden als mogelijkheid. Het is altijd mijn eerste keus, want het is letterlijk alleen dat toevoegen op een parent, waarna alles opeens niet meer uit elkaar flikkert.

Er zijn wat randgevallen, zoals je (R4gnax) aanhaalt. Daarvoor zijn weer andere contain-the-float oplossingen, zoals de "clearfix", simpelweg de container ook laten floaten en soms kun je een float inruilen voor een inline-block.

[ Voor 8% gewijzigd door _Thanatos_ op 08-04-2011 22:31 ]