Archief - CSS: growing div

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.

N`Kr1pt

Legacy Member
weet er iemand hoe ik een div kan laten groeien naargelang de inhoud?
ik wil ongeveer hetzelfde gedrag verkrijgen als dat van een <td> element.

dit is de ruwe layout:
Code:
<body>
<div id="container">
<div id="header"></div>
<div id="content">
	<div id="menu_left">
	
	</div>
	<div id="main">
		
	</div>
	<div id="menu-right">
	
	</div>
</div>
<div id="footer"></div>
</div> <!-- close container div -->
</body>
</html>

dit is de css:
Code:
body {
	background-color: #333333;
	color: white;
	font-family: verdana, arial, serif;
	font-size: 12px;
}

#container {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	width: 100%;
	background-color: #555555;
}

#header {
	width: 100%;
	height: 110px;
	background: url(images/banner_bg.jpg);
	background-repeat: repeat-x;
}

#footer {
	width: 100%;
	height: 100px;
	background: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
}

#content {
	width: 100%;
	height: 80%;
	background-color: #555555;
	
}

#menu_left {
	width: 250px;
	margin-left: 10px;
	float: left;
}

#menu_right {

}

#main {
		position: absolute;
		left: 290px;
		top: 180px;
		width: 450px;
}

ik zou graag willen dat de content div in hoogte groeit naargelang de inhoud ervan

grooverider

Legacy Member
onderaan in je div een nieuwe div zetten, met in je css #nieuwediv {clear: both;}

dit moet je overigens alleen doen als je floats gebruikt in je content div, anders groeit hij vanzelf mee (correct me if i'm wrong)

grooverider

Legacy Member
je gebruikt wel floats, namelijk in menu_left
dit zorgt ervoor dat menu_left links gaat gefloat worden, en al de rest er rechts rond moet komen. In dit geval gaat je content div geen rekening houden met de inhoud (in termen van height) van menu_left. Om dit op te lossen kun je, zoals vermeld in mijn eerste post, in je div content helemaal als laatste een nieuwe div (bvb cleardiv) toevoegen, en in je css zetten #cleardiv {clear: both;} en uw probleem zal opgelost zijn.

btw: noch uw html, nog uw css valideert. Als er iets niet werkt zoals het zou moeten werken is de eerste stap die ge best neemt het valideren van uw code, en dan pas verder zoeken. Ook snap ik helemaal niet waarom ge tables gebruikt . . .

orez

Legacy Member
position absolute hoeft niet.

menu_right zal ook gefloat worden, dient in je html code voor main div te komen.

N`Kr1pt

Legacy Member
ok, na wat prulwerk is het toch goed gekomen.
de code + css is inderdaad nog niet valid, maar daar ga ik asap werk van maken.

time is always against us.
full-time job als software engineer, daarbuiten dan nog een deel projecten waarvan dees er een van is, mijn vriendin verdient daarbuiten ook wat aandacht.
het minste waar ik me momenteel dus zorgen om maakte was of de html 100% valid is ;)
der staat zelfs geen doctype in ffs.
maar ik zeg het, zo gauw ik de kans krijg ga ik dat refactoren.

thx!
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