[css] min. hoogte + uitrekken div-element

[Verwijderd]

Mijn topic gaat een klein beetje lijken op wat ik eerder heb gepost omtrendt dit probleem, maar helemaal hetzelfde is het niet.

Ik heb een div-element met een groene achtergrond. Tevens bevat dit div-element een bg-image die een uitlijning naar linksonder heeft (zie #1).
Vervolgens staat hier een andere element in, met een margin-left van ongeveer 150px om op die manier - voor het oog - een left-bar te creëeren die overigens verder geen nut heeft. Dit element bevat straks de content (zie #2).
Beide elementen hebben geen height-value mee gekregen. Het werkt perfect.
Als ik nu namelijk ontzettend veel content in #2 plaats, dan rekken beide elementen netjes mee.

Maar, ik wil een minimale height hebben van beide elementen van ongeveer 500px.
Als ik dit wil doen en zo bepaal bij een van de elementen, en er staat content in wat een totaal van hoger dan 500px maakt, dan rendert IE het wel goed, maar Firefox bijv. niet. De content lijkt dan `uit het #2-element te schieten (een overflow dus, waarbij de hoogte van de parent elementen niet aangepast wordt).



Hoe kan ik dit netjes en crossbrowser oplossen?

Relevante CSS-code:

Cascading Stylesheet:

.maincontainer { /*  #1  */
width: 100%;
background: url('afbeeldingen/subbg.gif') left bottom no-repeat;
background-color: #c8e7a6;
}

.content { /*  #2  */
margin: 0 0 0 135px;
width: 371px;
height: 500px; /* boosdoener */
text-align: left;
background: url('afbeeldingen/contentbg.gif') right top no-repeat;
background-color: white;
padding: 0 120px;
}

[ Voor 19% gewijzigd door Verwijderd op 12-02-2006 16:34 ]

[Verwijderd]

Gebruik min-height in plaats van height, en gebruik conditional comments om voor Internet Explorer een extra stylesheet toe te kennen, waarin he height gebruikt.

[ZeilDude]

Kom op zeg, dit soort dingen is hier al tig keer voorbij gekoemn. Daarnaast is niet alleen je css relevant, maar ook je html. Hier kunnen we weinig mee, hooguit wat gokken. Google eens op 2-columns css layout en je zult vele werkende voorbeelden vinden.
Mocht jouw case tóch heel anders zijn dan alle andere, geef dan even duidelijk aan waar die verschillen zitten.

[Danjel]

En anders kun je ze toch ook naast elkaar zetten en #2 een groene border geven.

[JHS]

Cascading Stylesheet:

.content {
  /* rest */
  height: 500px;
  min-height: 500px;
}

IE < 7 negeert het tweede statement en zal dus het eerste uitvoeren. En dat is geen probleem, aangezien IE < 7 height behandelt alsof het min-height is. Of Cheatah zijn oplossing .

Danjel: Dat hoeft niet per sé hetzelfde te zijn. Ik denk dat ivy bovendien het daadwerkelijke ontwerp heeft versimpeld .

[ZeilDude]

Ja, met wat zoekwerk was dit topic niet nodig geweest. Recentelijk nog behandeld in [rml][ CSS] minimale hoogte child doorgeven aan parent[/rml].

[crisp]

JHS schreef op zondag 12 februari 2006 @ 17:07:

Cascading Stylesheet:

.content {
  /* rest */
  height: 500px;
  min-height: 500px;
}

IE < 7 negeert het tweede statement en zal dus het eerste uitvoeren. En dat is geen probleem, aangezien IE < 7 height behandelt alsof het min-height is. Of Cheatah zijn oplossing .

Even op inhaken
IE7 wordt mogelijk een probleem: die heeft wel de overflow gefixed (dus 500px blijft 500px en rekt niet meer uit), maar min-height zit er nog niet in, en het is nog maar de vraag of dat er in de final versie wel in zal zitten...
3x raden wat Microsoft zelf als work-around aanraadt... javascript

Overigens, want net getest, werkt bovenstaande oplossing niet aangezien height niet overschreven wordt door de min-height. min-height zal pas uitrekking van de container tot gevolg hebben bij overflow op het moment dat height de computed value 'auto' heeft...

Een ander gangbare methode (naast conditional comment) is deze:

Cascading Stylesheet:

#content {
  height: 500px;
}
parent>#content {
  height: auto;
  min-height: 500px;
}

gaat echter ook niet helpen in IE7...

en deze (maar dat is een ranzige hack - bovenstaande is een filter):

Cascading Stylesheet:

#content {
  _height: 500px; /* wordt toegekend in IE < 7 */
  min-height: 500px;
}

kortom: het is nog even afwachten hoe het straks met de ondersteuning van min-height zit in IE7; als dat uiteindelijk niet geimplementeerd wordt dan zullen er aardig wat layouts gaan breken...

[ Voor 40% gewijzigd door crisp op 12-02-2006 19:15 ]