CODEWITHSUNDEEP
htmlcssnavigationmarkup
verpixelt
verpixelt

Reputation: 23

100% width nav across page wrapper

i have a nav inside a site-wrapper,

<div id="wrapper">
  <nav>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </nav>
...
</div>

the wrapper has a defined width of 960px + margin: 0 auto. I want the Nav stretch over the whole 100% body width, across the 960px of the wrapper, without modifying the markup.

Any ideas?

Upvotes: 2

Views: 662

Answers (1)

meo
meo

Reputation: 31249

nav elements are display inline by default, thats is why:

CSS:

nav {
   display: block;
}

there you go: http://jsfiddle.net/meo/TBqrA/

edit after you clarified you question: http://jsfiddle.net/meo/TBqrA/2/ you could use position absolute...

absolute positioned elements are positioned relatively to the next element that is position relative, fixed or absolute (or simply the body). Just make sure that you wrapper is position: static...

Upvotes: 1

Related Questions