Home/ Questions/Q 7816767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:59:19+00:00

I have a fixed size layout where I center the content container. I want

  • 0

I have a fixed size layout where I center the content container.

I want the menu (home, about, contact, login), to span 100% of the screen.

Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/

enter image description here

The result I want is this:
enter image description here

I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:

    http://jsfiddle.net/sg3s/Hxhc5/3/

    This is problematic when we want to keep the space between the menu and the right col ‘open’ though.

    The easiest way and probably the best is to have a mock image of which the middle is left ‘open’ and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:

    http://jsfiddle.net/sg3s/Hxhc5/10/

    You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.

    • 0