1

Here is the sketch to better explain what I am trying to achieve (red lines are the invisible container):enter image description here

I want objects in header and footer to stay inside the fixed width container, but allow header and footer to have background color filling full width of browser window. How do I do that?

Albert
  • 497
  • 1
  • 7
  • 14
  • You're going to need to provide some of the code you've tried whilst attempting this yourself – Jay Feb 05 '16 at 10:10
  • Try sharing your code for some help? We wont do it all for you... – Sauced Apples Feb 05 '16 at 10:10
  • @Paulie_D: Personally, I'd say this question is a different question to the one you've marked as duplicated. Slightly different ways of tackling them. Albert: I'd split your header, content and footer up in to grids and apply the background to the containing elements. Google CSS grids, that'll get you on the right track. – Lewis Feb 05 '16 at 10:25
  • Which is precisely what the first answer says. – Paulie_D Feb 05 '16 at 10:28

1 Answers1

2

Don't try to make the area represented by the red lines in your diagram a single element.

For each block:

  • Set the background on a full width element.
  • Put a width constrained element inside it.
  • Put the content in the width constrained element.

Consider using a class to describe the constrained width element so you can reuse its CSS for each of the three blocks you have.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, that should do the job now. I was trying to make container a single element, but now I just split it in 3 separate fixed-width-containers. – Albert Feb 05 '16 at 10:24