Hello, am building my first site at the moment and am strugglin to move the footer in relation to my main content which expands and contracts with the amount of content in it. iv tried a couple of things with no luck, any help you can give me would be much appreciated!

excuse any rookie mistakes am using a combo of online tutorials and dreamweaver to get my code!

Quote Originally Posted by Index
<!DOCTYPE html>
<html>

<head>
<meta charset='UTF-8' />

<title>BASE</title>

<link rel='stylesheet' href='css/style.css' />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='js/example.js'></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/navbar/about_linkover.png','images/navbar/upcoming_linkover.png','images/navbar/previous_linover.png','images/navbar/involved_linkover.png')">

<div id="page-wrap">

<header>
<div id="logo"></div>
<nav>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','images/navbar/about_linkover.png',1)"><img src="images/navbar/about_link.png" name="About Us" width="107" height="59" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Upcoming Workshops','','images/navbar/upcoming_linkover.png',1)"><img src="images/navbar/upcoming_link.png" name="Upcoming Workshops" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Previous Workshop','','images/navbar/previous_linover.png',1)"><img src="images/navbar/previous_link.png" name="Previous Workshop" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Get Involved','','images/navbar/involved_linkover.png',1)"><img src="images/navbar/involved_link.png" name="Get Involved" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','images/navbar/facebook_linkover.png',1)"><img src="images/navbar/facebook_link.png" name="Facebook" width="47" height="49" border="0"></a>
</nav>
</header>
<div id="main-content">

<h1>Title</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem.
</p>

</div>
</div> <!--end of page wrap -->

<footer>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Upcoming Workshops</li>
<li>Previous Workshops</li>
<li>Get Involved</li>
</ul>
</footer>

</body>

</html>
Quote Originally Posted by CSS
* { margin: 0; padding: 0; }
html {
background: black url(../images/bg.jpg);
height: 100%;
}
body {
font: 14px/1.4 Georgia, serif;
height: 100%
}
article, aside, figure, footer, header, nav, section { display: block; }

#page-wrap {
width: 870px;
margin-top: 125px;
margin-left: auto;
margin-right: auto;
}

header {
position: relative;
background: url(../images/navbar.png)
no-repeat;
width: 969px;
height: 139px;
z-index:2
}

#logo {
position: absolute;
top: -100px;
left: -120px;
background: url(../images/logo.png);
no-repeat;
width: 258px;
height: 406px;
}

nav {
position: absolute;
left: 140px;
top: 25px;
}

#main-content {
position: absolute;
top: 150px;
width: 820px;
padding: 160px 25px 25px 25px;
min-height: 60%;
background: white;
border:2px solid #000000;
z-index:1;
box-shadow: 0 0 20px #fbf7c1;
}


#page-wrap h1 {
text-align: right;
font: 32px trajan pro; color: #173583;
padding-bottom: 60px;
text-decoration: underline;
}

footer {
width: 870px;
margin: 50% auto 0px;
letter-spacing: 1px;
font-family: trajan pro;
color: white;
text-align: center;
position: relative;
}

footer ul {
list-style-type: none;
}

footer ul li {
display: inline;
padding: 5px;
}
Cheers John