Parent div overflow: hidden, geneste div overflow: visible

[Jazzle]

Zoals de titel al zegt wil ik weten hoe ik ervoor kan zorgen dat de parent div als css property overflow: hidden heeft, terwijl een div die in de parent div genest zit overflow op visible heeft staan?

Ik heb namelijk een div met witte achtergrond over de hele pagina met een breedte van net geen heel scherm, deze rekt in firefox en opera niet mee met een div die weer daarin genest zit (in internet explorer wel). Dat kan ik oplossen door de parent div "overflow: hidden" mee te geven, echter in die parent div zit nóg een andere div die overflow op visible moet hebben, maar die wordt dus ook hidden als dat in de parent staat.

In internet explorer 6 werkt het nóg anders maar die heeft daarom maar gewoon een hele eigen css mee gekregen.

[Verwijderd]

Kan je anders een stukje code / url geven? Ik kan mij wel voorstellen wat je wilt bereiken maar zonder code is het wel een beetje gissen naar de oplossing.

Als ik toch mag gissen ... een z-index mee geven aan de div zodat de div die zichtbaar is bovenaan komt te liggen

[ Voor 24% gewijzigd door Verwijderd op 30-07-2008 21:11 . Reden: zinsbouw ]

[Jazzle]

Z-index zit er al op
url: http://jill.jazzle.nl
stylesheet: http://jill.jazzle.nl/wp-content/themes/default/style.css

Ja het is een redelijk zooitje, maar de code moet ik nog wat inkorten/opruimen.

[ Voor 22% gewijzigd door Jazzle op 30-07-2008 21:30 ]

[Arjen Tempel]

Het probleem is dat je 'te lange' content in <div class="left"> links gefloat wordt. Hierdoor wordt het uit de page-flow gehaald en niet meegenomen in de berekening van de hoogte van parent div's.
Je was al halverwege de oplossing met je <div class="clearer"> in <div class="bottom">, alleen was je vergeten om die ook daadwerkelijk een "clear: both" mee te geven in je stylesheet.

De oplossing is dus simpel:

Cascading Stylesheet:

.clearer {
  clear: both;
}

[Zoefff]

"Clearers" zijn stom, en doen me denken aan table-layouts uit 1990. Niet gebruiken dus, je hebt ze niet nodig.

Wat in jouw geval het probleem is dat je "div.col2" ("body > div#bgoverlay > div#wrapper > div#container > div.main > div.col2" dus) geen hoogte krijgt doordat de content uit de flow gehaald wordt, zoals Arjen ook al aangeeft. De correcte oplossing is om het blokelement dat de floatende elementen bevat, een "overflow: auto;" te geven. Oftewel:

Cascading Stylesheet:

div.col2 {
    overflow: auto;
}

Wellicht met een specifiekere selector als je ergens anders dezelfde class gebruikt, dat kan ik zo snel niet zien.

Daarnaast is het misschien geen slecht plan om wat in je containers te snijden. De helft is echt overbodig, en houd het een stuk overzichtelijker

[Jazzle]

Aha, ja ik zie het nu inderdaad ook, komt deels doordat de code erg onoverzichtelijk en onnodig groot is geworden dat ik het zelf niet zie. Had in gedachten om eerst de website te maken (met een hoop troep code) en daarna regeltje voor regeltje de code effcienter te maken zodat ik bij elke foute stap weer terug kan naar de inefficiente maar werkende code. Maar dat is geen succes

Ik ga nu eerst maar verder met opruimen inderdaad, hardstikke bedankt

[moozzuzz]

Meestal is het beter om eerst met "goede" code te starten maar eenvoudig zonder al te veel franjes en dan de "fancy details" toe te voegen . Je kan dan ook steeds terugvallen op werkende code, maar dan een versie waar je wel je jongen in terug vindt .

[Jazzle]

Ik heb nog een probleem die met hetzelfde te maken heeft, nu ik een form op een pagina heb staan rekt hij niet meer mee in IE en Opera, wel in Firefox. Ik snap het niet want het form doet niks bijzonders met de div structuur, het zet alleen een aantal form elementen in de post.

aparate css voor de form

[Jazzle]

*bump*

[Zoefff]

Zorg om te beginnen dat je valide HTML schrijft

Het feit dat je 1 van de paragrafen een sluit tag mist zou wel eens kunnen meewerken met het feit dat IE er niets meer van snapt

[Jazzle]

Zoefff schreef op zaterdag 02 augustus 2008 @ 17:34:
Zorg om te beginnen dat je valide HTML schrijft

Het feit dat je 1 van de paragrafen een sluit tag mist zou wel eens kunnen meewerken met het feit dat IE er niets meer van snapt

Hmm ja ik zie het, raar dat het in post (de website draait op wordpress) wel goed staat maar op de een of andere manier de laatste > niet wordt meegenomen. Anyway, het is gefixt zo