Search code examples
csscompass-sassblueprint-css

Fixed Blueprint div with background width that spans the whole browser window

I am using Compass with the Blueprint framework.

I am using a 24 column layout with a total width of 1000px. This is defined in my base.scss.

The markup looks like this:

<div id="menu">
  <div id="container">
     <div id="main-menu">
      <ul>
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
      </ul>
     </div>
  </div>
</div>

The scss:

@import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: red;
  min-width: 1000px;
  position: fixed;
  top: 0%;
  left: 50%;
  margin-left: 500px;

}

#main-menu{

  @include horizontal-list();
  @include span(24);
  border: red 1px solid;

}

The whole thing works. But I want to fix the menu to the top of the window.

The problem is that one I start adding position: fixed to any of the containers, then the background does not stretch 100%.

The effect I want is like facebook's menu. Notice that the background stretches 100% but the menu occupies only the grid and is centered:

enter image description here enter image description here

How can I achieve this kind of effect with blueprint?

I would prefer not to add any extra divs that do not have any sematic meaning.

Solution

  • This is what I ended up with:

    @import "../partials/base";
@import "blueprint";
@import "compass/typography/lists/horizontal-list";

#container{
  @include container();
}

#main-menu-container{
  background-color: blue;
  min-width: 1000px;
  position: fixed;
  width: 100%; //Notice that a width is explicitly set
  top: 0%;
}

#main-menu{
  @include horizontal-list();
  @include span(24, true);
}