Home/ Questions/Q 8225425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T15:24:51+00:00

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

  • 0

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

Desired CSS layout screenshot

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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: enter image description here

    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.

    • 0