CSS Forum

**Nick5185** · 03-17-2008, 02:46 PM

Hey Everyone,

I am trying to have a floating layer center itself based on the browser window size. I want to have the layer inside that be placed absolutely inside the relative layer?? I am using dreamweaver and my code just isn't working (safari tested) Can you take a look at what is missing from the code?

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>Live Indie Rock Wars - Lake Las Vegas - Apr 25-27 2008</title>
<style type="text/css">
<!--
body {
	background-color: #E0D3C1;
	background-image: url(images/bgSky.jpg);
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#Layer3 {
	position:absolute;
	left:10px;
	top:10px;
	width:976px;
	height:579px;
	z-index:3;
}
#Layer1 {
	position:absolute;
	left:5px;
	top:5px;
	width:1002px;
	height:600px;
	z-index:1;
}
-->
</style>
<script type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>

<div id="Layer1">
  <div id="Layer3">
  <table width="900" height="518" border="0" align="center" valign="bottom" cellpadding="0" cellspacing="0">
    <tr align="center" valign="middle">
      <td><table width="875" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="3" align="center" valign="bottom"><img src="images/introTop.png" alt="top" width="875" height="159" /></td>
          </tr>
          <tr>
            <td align="right" valign="top"><img src="images/introLeft.png" alt="left" width="206" height="281" /></td>
            <td width="500" height="281"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="281" title="Live Indie Rock Wars">
                <param name="movie" value="intro.swf" />
                <param name="quality" value="high" />
                <embed src="intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="281"></embed>
            </object></td>
            <td align="left" valign="top"><img src="images/introRight.jpg" alt="right" width="169" height="281" /></td>
          </tr>
          <tr>
            <td colspan="3" align="center" valign="top"><img src="images/introBtm.jpg" alt="btm" width="875" height="126" /></td>
          </tr>
      </table></td>
    </tr>
  </table>
</div>
</div>
</body>
</html>

**LadynRed** · 03-17-2008, 03:17 PM

You can't float and be absolute at the same time.

Based on the code you provided, I see no reason at all to use absolute positioning in the first place.

**Nick5185** · 03-17-2008, 04:24 PM

Here is a link :

http://www.liveindierockwars.com/index_tst.html

I want layer 3 which is now named inside to be absolutely positioned to layer 1 which is now named Holder.

I want the holder to float around depending on the window browser size. The Inside layer would float also.... but just becuase it is staying absolute to the floating holding layer.

I am new to layers and css.... have I gone in the wrong direction?

**Nick5185** · 03-17-2008, 05:14 PM

Ok... sorry for the waste of time.

You already posted a sticky i browsed over

http://www.webmaster-talk.com/css-fo...r-website.html

great stuff

**LadynRed** · 03-17-2008, 07:57 PM

Good

. The 'trick' is to make your 'holder' position:relative, then anything positioned inside of will be positioned relative to 'holder' and not the body.