asked on

100% Width on Fixed Container

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

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CompTeck2255

ASKER

Ta mate!