CODEWITHSUNDEEP
csscss-float
Ragnar123
Ragnar123

Reputation: 5204

Floating elements, full width

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.

Upvotes: 0

Views: 478

Answers (3)

sg3s
sg3s

Reputation: 9567

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.

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/

Upvotes: 0

John Conde
John Conde

Reputation: 219874

Why not use a background image that spans the entire page instead?

Upvotes: 0

Related Questions