Need help with relative positioning of nested DIVs [Archive]

timmeahy

07-23-2008, 07:23 AM

I'm aiming to have a flash navigation console nested inside a div which extends outside the left boundary of it's parent div.

It's very hard to explain exactly so I've drawn some diagrams.

Here's what I'm trying to acheive:
http://www.advancedschoolyearbooks.com/div-intended.gif

Here's the actual result i've come up with so far:
http://www.advancedschoolyearbooks.com/divtest.html
The results differ depending on the browser. In IE the horizontal positioning of the "NavInner" DIV is spot on but vertically it is hugging the top of the "Wrapper" table when it should be hugging the top of the "Navigation" DIV
In firefox I can not see the image contained in the "NavInner" DIV at all.

Here's a snip of my CSS:

body, html, #wrapper {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
height: 100%;
}

#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 100%;
}

#OuterFull {
width: 100%;
text-align: center;
display: block;
}

#OuterBoxed {
width: 969px;
height: 650px;
display: block;
margin: 0 auto;
}

#LeftCol {
width: 485px;
height:650px;
float: left;
}

#RightCol {
width: 484px;
height: 650px;
float: left;
background: url(bg.jpg) bottom left no-repeat;
}

#Navigation {
width: 484px;
height: 180px;
float: right;
overflow: hidden;
text-align: right;
margin: 0 auto;
}

#NavInner {
width: 969px;
height: 180px;
float: right;
text-align: right;
position: relative;
left: -485px;
}

#Content {
width: 484px;
height: 470px;
float: right;
overflow-y: auto;
overflow-x: hidden;
}

Here's my HTML:

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="wrapper">
<tr>
<td align="center" valign="middle">
<div id="OuterFull" align="center">
<div id="OuterBoxed">
<div id="LeftCol">LeftCol</div>
<div id="RightCol">
<div id="Navigation">
<div id="NavInner"><img src="nav.jpg" /></div>
</div>
<div id="Content">Content</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>

Medyman

07-24-2008, 01:24 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#Wrapper {
border:5px solid #eee;
width:100%;
}
#OuterFull {
margin:10px;
border:5px solid #ee0000;
}
#OuterBoxed {
margin:20px;
border:5px solid #eee;
position:relative;
text-align:relative;
}
#LeftCol {
margin:10px;
width:47%;
border:5px solid #ee0000;
float:left;
height:650px;
}
#RightCol {
margin:10px;
width:47%;
border:5px solid #ee0000;
float:right;
}
#Navigation {
margin:10px;
border:5px solid #eee;
height:200px;
}
#Content {
margin:10px;
border:5px solid #eee;
height:400px;
}
#NavInner {
background:#eee;
width:94%;
height:180px;
margin:0 auto;
position:absolute;
top:40px;
left:30px;
}

</style>
</head>
<body>

<div id="Wrapper">
<div id="OuterFull">
<div id="OuterBoxed">
<div id="NavInner"></div>
<div id="LeftCol"></div>
<div id="RightCol">
<div id="Navigation"></div>
<div id="Content"></div>
</div>
<br style="clear:both;">
</div>
</div>
</div>

</body>
</html>