How can I make a div span 100% the length of the page using the unsemantic css framework?

Question

Will I need to edit the framework? Or should I create this div outside of the container div? The div that I want to span 100% of the window is a menu div, so I want it to span 100% of the window, but I want the menu items inside it to conform to the grid system.

What's the best way to go about this? Putting the menu items inside the grid and then using minus padding to get it in?

Thanks a lot.

Answer 1

I know this question is about six months old but figured I'd post my solution here in case it may be useful to someone.

So my solution would be to just apply the grid classes on the elements that actually need the grid layout. In my example the header does not have any unsemantic classes so it can span across the entire width of the page, but the nav element is the grid container which will contain the columns with grid-xx classes. According to Unsemantic's Sass Documentation it should have a default max width of 1200px;

HTML

<header>                               
  <nav class="grid-container">
    <ul class="grid-33">
      <li><h2>My Site</h2></li>
    </ul>
    <ul class="grid-66">
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</header>

CSS

For this example:

• Reset the box model for html, body and header so the navigation takes up the entire width of the page
• Place a light gray background color for header so you can see that it takes up the entire width of the page
• Place a blue border for nav so you can see the element with class grid-container
• Horizontal align ul and show red border so you can see the elements with class grid-xx

Of course you'll have to further style the navigation to how you need it to look for your project. Here is the stylesheet to start with (built with compass using reset-box-model and inline-block-list mixins):

html, body, header {                                                                                                                                                                                                                     
  margin: 0;
  padding: 0;
  border: 0;
}

nav {
  border: thin solid blue;
}

ul {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
  border: thin solid red;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
}

header {
  background-color: lightgray;
}