SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    absolute inside relative?

    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.)

  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •