100% Width on Fixed Container

CompTeck2255
CompTeck2255 used Ask the Experts™
on
Hi Experts :)

I am having an issue with a website I am working on. I have the layout of div's looking in their correct flow but what I wish to achieve will mean I have to take the navigation div out of the normal flow of the document and place it above the main wrapper div (which isn't correct for the layout).

Basically I have a main wrapper that is 980px and inside that I have a header and navigation div. I need the navigation to have a width of 100% so it spans the whole width of the website. I have attached some rough code below so you can see what the setup is.

I am not sure if it is possible to set the width to 100% and still keep the flow of the document, so thats why I thought I would pass it by you people.

TIA - CompTeck2255.

<html>
<head>
<style type="text/css">
body {
	background-color: green;
}

#wrapper {
	width: 980px;
	margin: 0 auto;
	background-color: orange;
}

#header {

}

#nav {
	width: 100%;
}
</style>
</head>
<body>

<div id="wrapper">
	<div id="header">
		<div id="nav">
			<ul>
				<li>Home</li>
				<li>Services</li>
				<li>About</li>
				<li>Contact</li>
			<ul>
		</div><!-- #nav -->
	</div><!-- #header -->
</div><!-- #wrapper -->
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Commented:
Try this:
#nav { position:absolute; width: 100%; left:0;}

It works as you need.
CompTeck2255

Author

Commented:
Ta mate!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial