CSS: How to force objects to stay inside container but allow full width background? [duplicate]

Tags: html,css

Problem :

This question already has an answer here:

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?

Solution :

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.

    CSS Howto..

    How to center checkbox vertically in a table-cell?

    How to avoid inheriting opacity property in CSS?

    how to achieve this effect with css html?

    CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    How to center text with CSS?

    Show/Hide & Change CSS functions are not working

    How to style HTML select option hover and selected option effects

    How to center div within another div?

    How to design the data that you gathered from the table

    How to stack divs from top to bottom in CSS

    How do I implement responsive design into my CSS when I have two spans, side by side?

    Jquery Mobile dynamic thumbnail list-How to create a border?

    How to take in account children for :nth-child

    How to change fill color of SVG on click when it's used as a background image?

    How to set my Django form on the center of the page

    How do I make a div expand to the width of the page with css?

    Change Class or CSS “display” property of a DIV and show it smoothly

    how do i change a div background when you hover over a button in another div?

    how to make nav brand centrally aligned

    How can I add a border to the right side of this object?

    How to access my .png from a folder using CSS?

    how to make div background image responsive

    How to control the area of background so it only makes a limited area has color other area don't?

    how to implement list bullets in CSS [closed]

    How to link to a CSS if a certain condition happens?

    How can I stop my submenu from disappearing while hovering between spaced submenu items?

    how to hide html video controls in micorostf edge (fullscreen mode)

    How do I create a 'linklist' like a tooltip with HTML and CSS or jQuery and CSS?

    How to slice an Image Border for use in CSS?