Help with extra spacing

HTML & CSS
1

Hi,

Can anyone please explain why the more text I add to the main content area ‘full-size’ div… the more spacing gets added below it.

Is there a way to stop this?

example herel


/*begin normal CSS
----------------------------------------------------*/
body {
	text-align: center;
	background: #362f25;
	color: #333;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	}
	
	
#wrap {
	margin: 0 auto;
	width: 960px;
	text-align: left;
	background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
	padding-bottom: 5px;
	}



	



/*classes
----------------------------------------------------*/


.full-size {
	
	margin-left:20px;
	margin-top:20px;
	width: 700px;
	font: 12px;
	position:relative;
	left:180px;
	top:-370px;
	}
	




/*header
----------------------------------------------------*/
#header {
	height: 50px;
	background: #362f25;
	color: #d2cccb;
	font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
	}







/* left nav menu
----------------------------------------------------*/

#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}
2

On pages other than main page you have content inside <div class=“full-size”>, which is aligned to bottom of your navigation and then brought up where its supposed to be via top:-370px, so when you add content to it, you are actually adding content below your navigation, increasing your page’s height.

I suggest to separate navigation elements from content elements by placing them into different containers, then you can correctly position them instead of using weird relative positioning. Use layout from main page, it works much better.