Mixed centered and full width?

I am interested in having a page that has a full width bar at the top. It will contain a centered navigation list. On this page I want a full width gradient with a centered set of content in the middle of the page. I want to use images that will blend in to my gradient nice. The image blends I can handle. I don’t know if my ideas for laying out the elements to be used by CSS is a good idea. Can anybody suggest a best practice or a good way to do this? Thanks

https://jsfiddle.net/pctechtv/d2Lrnwtj/4/

Hi,

Does your fiddle not do what you want or were you looking for other methods to do the same thing?

Generally when you want wide strips of color to the viewport edge then you just need to do it in pairs. The outer wrap is 100% wide and contains the background and then the centred section is nested inside the wrap with the max-width that you need.

This means that you can’t have a whole page wrap of a fixed width when you want elements like this mixed in the middle.

I would do your header element separate from the page and keep it 100% width so that you can apply the top wide border to the navigation so that it contains the centred navigation and is not separate from it and that will allow it to grow with text-zoom or text wrapping,

The same applies for your green section and centred image.

This will avoid the use of empty absolute positioned elements that have to rely on magic numbers to work and are unreliable and hard to maintain in a dynamic environment.

Hope that helps :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.