100% Width on Fixed Container

CompTeck2255 used Ask the Experts™
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.

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

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

#header {


#nav {
	width: 100%;

<div id="wrapper">
	<div id="header">
		<div id="nav">
		</div><!-- #nav -->
	</div><!-- #header -->
</div><!-- #wrapper -->

Open in new window

Watch Question

Do more with

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

It works as you need.


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