Archief - HTML/CSS: hoogte afhankelijk van óf menu óf inhoud?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
H

HTrance

Legacy Member
Ik ben wat aan het prutsen en ik kwam tot dit resultaat hier.
Wees gerust de kleurtjes zijn fel maar worden veranderd. Nu zie je gewoon alles heel duidelijk ;) .

Afin los daarvan: zoals je op de pagina ziet heb je links oranje kleine menu's die als float staan ingesteld zodat het roze vlak gelijk komt met het bovenste oranje menu.

Nu past de pagina zich automatisch aan aan de lengte van het roze vlak. Dit is nooit een probleem behalve als het roze vlak qua hoogt kleiner wordt dan de totale hoogte van alle oranje menu's. Dan wordt het ronduit lelijk zoals hier te zien is.

Daarom mijn vraag: kan ik ervoor zorgen met html/css dat de pagina-hoogte afhankelijk is van de totale oranje menu's én het roze vlak zodat de pagina nooit onder één van beiden kruipt?

Hier meteen de opbouw:
HTML: 
	<div class="container">
		<div class="main_head">
		</div>
		<div class="main_content">
			<div class="navbox">
				<div class="menu_big">
					<div class="menu_big_head"></div>
					<div class="menu_big_content">
					</div>
				</div>
				<div class="workbox">
					<div class="menu_small">
						<div class="menu_small_item_head"></div>
						<div class="menu_small_item_content"></div>
						<div class="menu_small_item_head"></div>
						<div class="menu_small_item_content"></div>
					</div>
					<div class="page">
						<div class="page_head"></div>
						<div class="page_content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

P.S. ik heb 't gebruik van de div "container" geïmiteerd, als 't verkeerd gebruikt wordt laat 't dan maar weten é ;) (nu dat er toch topic is)
g

grooverider

Legacy Member
in die blauwe div een nieuwe div zetten, helemaal als laatste, en in je css "clear: both;" zetten. That should do the trick
K

KlAzOiD

Legacy Member
en hoe voorkom je dat het mainstuk in IE niet onderaan gedropt wordt maar mooi naast de kleine boxjes staat?
K

KlAzOiD

Legacy Member
Sorry voor de bump maar ik zit nog altijd met dit probleem.
Ik gebruik een gelijkaardige layout en in IE6 springt

HTML: 
<div class="page">
	<div class="page_head"></div>
	<div class="page_content"></div>
</div>

onder de <div class="menu_small"> ipv ernaast. Iemand die hier een oplossing voor weet? Desnoods via een andere opbouw van de divs. Dit is op zich wel belangrijk voor mij omdat er nog te veel mensen zijn die gebruik maken van IE6.
D

Devastate

Legacy Member
damn; had ik dat clear both uitgewerkt maar blijkbaar had je dat al :P
K

KlAzOiD

Legacy Member
inderdaad, in het voorbeeld van HTrance in de code staat nog geen clear both maar op de eigenlijke link naar zijn voorbeeldpagina staat die er wel al tussen. Toch bedankt.

http://users.telenet.be/HTrance/test/index3.htm

Ik heb al geprobeerd om de breedte van de "page" kleiner te maken om te zien of die niet te groot was voor z'n container maar dit blijkt het geval niet te zijn.

*edit*

Ik vermoed dat dit toch het probleem is, had eerst keer vergeten de "page" mee te verkleinen. Dan staat alles wel goed, even goed alle margins en paddings nakijken dus.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan