Question

I’m creating a fluid website design and am specifying min-width and max-width values, however, I’d like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.

Furthermore, I would also like to set a minimum margin for the page (e.g. 16px) so that there is always a gap between the content and the edge of the page.

Ideally as in the image below:

What’s the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I’ve tried to do this I can only get one or the other.

Thanks for any help in advance.

Answer 1

There are a few different ways to do it, but this jsFiddle illustrates how I would do it: http://jsfiddle.net/joshnh/UDwcp/