I'm currently utilizing the Compass framework in conjunction with the Blueprint framework.
Within my setup, I've configured a 24 column layout with a total width of 1000px declared in my base.scss file.
The HTML structure appears as follows:
<div id="menu">
<div id="container">
<div id="main-menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
</div>
Regarding 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;
}
Everything is functional, but now I aim to affix the menu at the top of the window.
The issue arises when applying position: fixed to any containers, as the background fails to stretch 100%.
I desire an effect similar to Facebook's menu where the background extends fully but the menu occupies the grid and remains centered:
How can Blueprint help me achieve this desired effect without necessitating the addition of superfluous div elements lacking semantic meaning?