First off, here's a screenshot of my Photoshop screen with some notes.

Now, what I'm trying to do is have the sidebar and then main content area both be a fixed width, but I want the backgrounds (the dark gray, light gray, and red) to extend all the wide to the sides.

So, the columns are technically fixed width (they shouldn't expand or contract at all) but their backgrounds should be fluid with the width of the browser.

Any ideas how to pull this off? My brain is hurting from trying to figure this thing out.

1 answer


The stripes need to be a background image on the body, then match up the fixed width column content to the appropriate location.

Make the header image and the strip as wide as the widest browser (say 2560px or more) and center it as a body background image, have your fixed width content in a content div, centered in the viewport.

Then create a two col layout in that for content.

e.g. the striped header here:

Answered over 8 years ago by Tony Crockford