techlounge
Technical User
Hey all,
Hopefully I'm on the right track and someone with the right know-how will be able to easily show me what I need to add to my code.
I'm posting a very basic page layout that I'm hoping to use as a template in future. I want to keep the drop-shadow around the main container and have the Footer at the bottom of the screen if there isn't enough content to push it down but if there is, the footer will expand to include more content in the Content DIV.
Hope you can help without me having to re-do it again
Thanks in advance
Hopefully I'm on the right track and someone with the right know-how will be able to easily show me what I need to add to my code.
I'm posting a very basic page layout that I'm hoping to use as a template in future. I want to keep the drop-shadow around the main container and have the Footer at the bottom of the screen if there isn't enough content to push it down but if there is, the footer will expand to include more content in the Content DIV.
Hope you can help without me having to re-do it again
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" />
body {
background-color: #FF9;
}
* {
margin: 0;
padding: 0;
}
#container {
background-color: #9F6;
width: 950px;
margin-right: auto;
margin-left: auto;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
#header {
background-color: #060;
height: 220px;
}
#footer {
background-color: #060;
height: 150px;
}
#content {
background-color: #CCC;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
Thanks in advance