overflow hidden

[willem008]

goede dag

Ik wil bij mij website de puntjes op de i proberen te zetten.

Nu zag ik als ik mijn layout in 3D bekijk dat het info vak(div id="info") buiten het content uitsteekt

Ik heb zowel de hoofdcontainer als het content overflow hidden meegeven dus het lijkt mij dat het content mee moet rekken als
het info vak groter wordt.(maar niet)

 

[csshunter]

Hoi Willem,
Wat een prachtige 3D-weergave!
Maar zonder echte pagina met alles er op en er aan valt er niet zo goed iets over te zeggen.

• Om welke site/pagina gaat het?

In het algemeen doet een {overflow:hidden;} precies wat het zegt: wat oversteekt buiten een <div> wordt niet getoond. De inwendige <div>'s rekken dan dus niet de div op tot alles er in past!

Maar ... als de div met de {overflow:hidden;} één of meer div's erbinnen heeft die gefloat zijn, dan rekt deze buiten-div juist weer wel mee.

• Dat is een truc om bv. de achtergrond achter twee gefloate kolommen altijd door te trekken tot onder de hoogste kolom (en een alternatief voor een element met {clear:both;} op het eind van de div).

Maar nogmaals: bij een link naar een echte pagina kan beter gezegd worden wat er in dit geval aan de hand is.

Met vriendelijke groet,
CSShunter

 

[willem008]

http://wlvdmeer-montage.nl

 

[csshunter]

Ah, de andere site.
Hier is inderdaad iets anders aan de hand.
De <div id="info"> heeft een {position:absolute;} meegekregen, en ontsnapt daarmee aan alle andere pagina-elementen (gefloat of niet).

• Dan kan een {overflow} van die andere div's geen enkel effect hebben.
• De info-div ontsnapt óók aan de hoogte van de body, en de body wordt maar net zo hoog als het hoogste niet-absolute element. Dat is hier de <div id="content">, en de hoogte van de pagina wordt daaronder afgekapt, zodat een deel van de info-div wegvalt.

Haal je de absolute positie uit de info-div, dan wordt de volledige info-div gewoon zichtbaar (want wordt weer opgenomen in de content-div).

Met vriendelijke groet,
CSShunter

 

[willem008]

ja hellemaal goed

Nu vallen alle vakken gelijk.



alleen bijv het menu links is korter,( heeft een vaste hoogte) kan ik zoiets beter aanpassen of maakt dat hellemaal niet uit.

 

[csshunter]

Maakt niet echt uit.
Je zou wel de ul.navbar{height:530px;} kunnen maken, dan komt het witte scheidingslijntje met de content tot helemaal onderaan.