absolute inside relative?

**tgavin** · Oct 18, 2006 07:46

I'm trying to lay out my page with 3 divs nested inside a container that is centered on the page.

Code:

<container div>
   <headwrap div>
   <contentwrap div>
   <footerwrap div>
</container div>

The headwrap div has absolutely positioned items because of show/hide layer elements, etc. I'm having trouble getting the contentwrap div and the footerwrap div to flow after the headwrap div

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0;
	text-align: center;
}
#container {
	margin: 0 auto;
	text-align: left;
	width: 800px;
	position: relative;
}
#headwrap {
	float: left;
	clear: left;
	position: relative;
}
#contentwrap {
	float: left;
	clear: left;
	position: relative;
}
#footwrap {
	float: left;
	clear: left;
	position: relative;
}
#header {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:186px;
}
#bNews {
	position:absolute;
	left:54px;
	top:186px;
	width:70px;
	height:18px;
	z-index:1;
}
#bTour {
	position:absolute;
	left:124px;
	top:186px;
	width:139px;
	height:18px;
}
#bBios {
	position:absolute;
	left:263px;
	top:186px;
	width:80px;
	height:18px;
}
#bMedia {
	position:absolute;
	left:343px;
	top:186px;
	width:95px;
	height:18px;
}
#bMedia2 {
	position:absolute;
	left:343px;
	top:204px;
	width:95px;
	height:62px;
	visibility: hidden;
}
#bForum {
	position:absolute;
	left:438px;
	top:186px;
	width:97px;
	height:18px;
}
#bHome {
	position:absolute;
	left:535px;
	top:186px;
	width:94px;
	height:18px;
}
#birdBot {
	position:absolute;
	left:629px;
	top:186px;
	width:171px;
	height:39px;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="headwrap">
    <div id="header"></div>
    <div id="bNews"></div>
    <div id="bTour"></div>
    <div id="bBios"></div>
    <div id="bMedia"></div>
    <div id="bMedia2"></div>
    <div id="bForum"></div>
    <div id="bHome"></div>
    <div id="birdBot"></div>
  </div>
  <div id="contentwrap">content goes here</div>
  <div id="footwrap">footer goes here</div>
</div>
</body>
</html>

**Paul O'B** · Oct 18, 2006 10:02

Hi,

You would need to give the headwrap a specific height large enough to encompass the absolute elements otherwise its height will be zero because absolute elements are removed from the flow.

( BTW You can show and hide any elements not just absolute elements anyway.)

**tgavin** · Oct 18, 2006 12:10

Thank you Paul. That did it.

The client wants this page built in dreamweaver so they can easily update it. DW's show/hide action only works on absolutes. I could modify the javascript for display: none, but then it wouldn't be easy for them any more.

I'm going to study your code though. That looks promising. Thanks!

User Tag List

Thread: absolute inside relative?

Thread Tools

Display

absolute inside relative?

Bookmarks

Bookmarks

Posting Permissions