Absolute positionded divs + ul in a 100% height wrapper

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 &amp; 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.

Hi,

“Absolute elements are removed from the flow”. Say that aloud ten times until it sinks in :slight_smile:

You can’t have a footer under absolute elements because " absolute elements are removed from the flow" and exist in their own little islands without a care in the world and no nothing of anything outside their own little environment (a bit like me).

Put the elements back in the flow (static positioning) and then the footer will once again take notice. I didn’t see anything in that design that needs absolute positioning and the page looks large enough not to need a sticky footer either.

That image seems awfully large for web page though?

Hi Paul thank you for the reply. The way I have the CSS and HTML now, as you can see, are without the actual content as shown in the example link. So what should I do there? Be cause there need to be an extra container on top of what you saw in my CSS and HTML holding the header content, menu content etc width 1000px. So actually what I showed is background content only the white part with the pattern should be able to extend depending on the content. If you look at the example link, how would you set this up?

P.s. It is huge indeed!!! But I just try to do the job I get paid for. I have stopped telling people that maybe they should take another approach. Maybe shameful but true. They hire a photoshop guru :slight_smile: and I just try to transform it into valid html/css

This is very quick and very rough but something roughly like this without using a sticky footer:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body,h1 {
	margin:0;
	padding:0
}
body { background:brown }/* footer color */
#wrap {
	min-width:800px;/* or whatever the minwidth is*/
	width:100%;
	background:#fcf;/* add repeating body background */
}
#header {
	min-width:800px;
	width:100%;
	background:blue;/* header background here*/
}
.inner, .content {
	width:100%;
	max-width:1020px;
	min-width:800px;
	margin:auto;
}
.outer {
	width:100%;
	min-width:800px;
	background:green;/* big image here */
	min-height:400px;
}
.content {
	margin:20px auto 0;
	background:#fff;
}
#footer {
	clear:both;
	background:brown;
	min-height:70px;
}
</style>
</head>

<body>
<div id="wrap">
		<div id="header">
				<div class="inner">
						<h1>Logo/Name<span></span></h1>
						<ul class="menu">
								<li>menu</li>
						</ul>
				</div>
		</div>
		<div class="outer">
				<p>100% wide image goes here</p>
		</div>
		<div class="content">
				<h2>Stuff here</h2>
				<p>More stuff</p>
				<p>More stuff</p>
				<p>More stuff</p>
				<p>More stuff</p>
				<p>More stuff</p>
		</div>
</div>
<div id="footer">
		<div class="inner">Inner footer</div>
</div>
</body>
</html>


If needed a sticky footer could be added but i don;t really see the point unless you have some very small pages. I also used min and max widths so you could make it flexible but if it has to be a fixed width it can easily be changed.

My God. Why am I always thinking so difficult. Thank you Paul, so much!! I saw a long night in front of me figuring how I could solve this. Sometimes I see the light but sometimes I don"t

Sleep very well for later. and thank you again, you have saved my day.