troubleshooting Question

100% Width on Fixed Container

Avatar of CompTeck2255
CompTeck2255Flag for Australia asked on
CSSHTML
2 Comments1 Solution236 ViewsLast Modified:
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

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros