YUI pure css fixed width

Question

Can someone show me an example of how I might use purecss.io to implement a fixed width/responsive design, similar to the 960 grid like bootstrap, etc???

The fluid width simply won't work for my particular design, here is what I currently have:

    <nav class="pure-u" id="menu">
      <div class="pure-menu pure-menu-open">
        <a class="pure-menu-heading" href="/">HOME</a>
        <ul>
          <li class="pure-menu-selected"><a href="#">Clients</a></li>
          <li><a href="#">Company</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

    <div class="pure-u-1" id="main">
      This is the main content area          
    </div>
  </div>        

</body>

I need the above wrapped in a containing DIV which centers and has a fixed width of 960 but adjusts responsively as required...

Any ideas???

Regards, Alex

Answer 1

hope this helps: http://jsfiddle.net/pX7bD/. The idea is to wrap everything in a div that has a fixed max-width and auto horizontal margins (so it's centered).

#wrapper { max-width: 960px; margin: 0 auto; }