We help IT Professionals succeed at work.
Get Started

100% Width on Fixed Container

CompTeck2255
CompTeck2255 asked
on
2 Comments
1 Solution
234 Views
Last Modified: 2012-05-11
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
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE