I just received a .PSD which I have to convert into a design. So my first thought was to have 100% width and 100% height wrapper and a sticky footer, with within the wrapper 3 absolute positioned divs and 1 absolute positioned ul. Everything seemed to work fine, but the absolute positioned div holding the content is not extending along with the content. Here is an example on how it should look like. (the horizoltal scroll is there because this example is a jpg within a html page) and here are my CSS and html:
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,dl,dt,dd,table,tr,td,th,p,img {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
}
html, body {
width: 100%;
height: 100%;
}
body {
min-width: 1023px;
font-family: Tahoma, Geneva, Verdana, sans-serif;
line-height: 1;
color: #FFF;
overflow: hidden;
}
#wrapper {
width: 100%;
min-height: 100%;
margin: -50px auto 0;
position: relative;
clear:both;
z-index: 1;
overflow: hidden;
font-size: .8125em;
}
* html #wrapper{
height:100%
}
#header_panel {
width: 100%;
height: 100px;
position: absolute;
left: 0;
top: 0;
border-top: 50px #FFF solid;
background: #8c7f79 url(../images/site/header_patern.png);
}
#menu_panel {
width: 100%;
height: 34px;
position: absolute;
left: 0;
top: 0;
background: #FFF;
}
#supersized {
width:100%;
height: 620px;
display:block;
position: absolute;
top: 134px;
left: 0;
overflow:hidden;
z-index:-999;
}
#content_pannel {
width: 100%;
padding: 60px 0;
position: absolute;
top:754px;
background: #FFF url(../images/site/body_patern.png) center center;
z-index: 0;
overflow: hidden;
z-index:-999;
}
#content {
width: 1010px;
margin: 10px auto 0;
background: url(../images/site/content.png) repeat-y;
position: relative;
}
#content h1 {
padding: 30px;
font-size: 1em;
color: #5c4c9d;
text-transform: uppercase;
}
#content p {
margin: 0 30px;
}
#content p + p; {
margin: 15px 30px 0;
}
#footer {
width: 100%;
height: 50px;
position: relative;
clear: both;
background: #61534c;
z-index: 1000;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet"
type="text/css"
href="css/cssSite.css"
media="screen" />
</head>
<body>
<!-- #wrapper -->
<div id="wrapper">
<!-- #header_panel -->
<div id="header_panel">
</div><!-- #header_panel -->
<!-- #menu_panel -->
<div id="menu_panel">
</div><!-- #menu_panel -->
<ul id="supersized"></ul>
<!-- #content_panel -->
<div id="content_pannel">
<div id="content">
<h1>ROOMS & SUITE</h1>
<p>Vestibulum nec massa ac urna mattis tempus a ac diam. Integer mauris sem, porttitor quis gravida id, ultrices non dui. Suspendisse condimentum metus quis dolor consequat eu vestibulum tellus imperdiet. Praesent volutpat, turpis non consequat cursus, odio risus dictum libero, in iaculis enim erat volutpat tortor. Vestibulum vel velit vel turpis sollicitudin accumsan. Duis odio tortor, egestas ac pretium sed, tristique sed mauris.</p>
<p>Vivamus ullamcorper neque quis leo tristique volutpat. Praesent in tristique purus. Morbi interdum porttitor facilisis. Maecenas pretium, mi a auctor gravida, ligula eros molestie ipsum, vitae imperdiet magna mi eu sapien. Suspendisse egestas lacus in metus ultricies ut ornare nibh blandit. Donec ac gravida ipsum. Maecenas et risus eget sapien porta varius in vitae est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer malesuada libero ac mauris sagittis ullamcorper. </p>
</div>
</div><!-- #content_panel -->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
</div><!-- #footer -->
</body>
</html>
The problem I have are with the content_panel and content divs. obviously both divs should extend depending on the amount of content but this is not happening.
Did I forget something or is this the complete wrong approach? Any advise would be highly appreciated.