Grid system with nested 100%-width header beside sidebar?

Question

I've attempted with both 978.gs and Blueprint to create the following layout:

I know how to get a 100%-page-width header that sits above the sidebar but I am struggling with how to get the desired layout with a sidebar and a nested 100%-width header using grid systems? If it's not possible with a grid system, how can I achieve this?

Answer 1

Michael P, please try to be more specific with your questions (though most of us really appreciate your concise wording as it is!). I'm going to attempt to answer and I hope I understood you. If I DID, then don't worry — it's easy!

• Your sidebar has a fixed CSS width attribute and is aligned to the left side.
• Your main section (to the right) should take up the remaining page width, (perhaps by having margin-left set to the same value in px as the sidebar).
• Your main section contains the header bar, SEPARATE from the sidebar, right? Your main section also contains your grid system.

Whatever the case, the main section should be an HTML <div></div> element, right?

If you put another div inside of the main section, you can make it 100% width. That will only fill as wide as its parent container. See this pic:

Anyway, here is a fiddle with the code I made to make that: http://jsfiddle.net/Vm7YU/ Check it out. I hope this answers your question. If not, please say so.