[jonnekke]

Hi there..

I got this setup in my site:

<div id="bodd">
	<div id="leftside"></div>
	<div id="contentArea"></div>
	<div id="news"></div>	
</div>

and this in my css:

html {
	height: 100%;
	width:100%; 
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding:0px;
}

body { 
	background-image: url(../images/bg.jpg);
	background-attachment: fixed;
	background-position: center top; 
	background-repeat: repeat-y;
	background-color: #ffffff;
	margin-top: 0px;
	margin-left: 2px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
}

#bodd {
	width:1000px; 
	height: auto; 
	margin-left:auto;
	margin-right:auto;
}

#linkerkant {
	float: left;
	margin: 0px;
	border: 0px;
	width: 190px;
	height:auto;
}

#contentArea {
	float: left;
	margin: 0px;
	border: 0px;
	width: 570px;
	height:auto;
}

#news {
	float: left;
	margin: 0px;
	border: 0px;
	width: 240px;
	height:auto; 
}

I would like to addapt the height of "#bodd" to the other divs. I thought it would be working
because the other div's are inside the "#bodd" but the height is not the same as the div's inside.
When I set to height: inherit; the height is 100% en not "longer" of the site is longer and I need
to scroll. How can I make this work?.

_j

[m1`]

the problem is you can't use float:left with those divs inside #bodd, rather set

#contentArea {
margin-left: 200px <-- use the actual width of #leftside instead of 200px
margin: 0px;
border: 0px;
width: 570px;
height:auto;
}