Need help with relative positioning of nested DIVs

**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:

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:

Code:

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:

Code:

<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

Code:

<!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>

Thread: Need help with relative positioning of nested DIVs

Thread Tools

Search Thread

Need help with relative positioning of nested DIVs

Bookmarks

Bookmarks

Posting Permissions