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..

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How i can create dynaminc ordered list items with pure css

    jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

    How to correctly set background image in a HTML page using a JavaScript function

    How to scroll an html element both horizontally and vertically with top and side labels scrolling correctly

    How to locate Element via CSS Selector/XPath?

    How should I re-create this design in HTML and CSS?

    How to add CSS files for different platform devices? [closed]

    How to change link color when using jquery mouseover

    How come one of my columns in bootstrap is not functioning properly?

    How to use css to find a list element in css alone, i.e. not be css3 dependent?

    How to remove Menu Item Class form secondary menu

    how to load multiple lazy css load file

    How to include library files (css/js) in angular-fullstack based app

    How do I set the style of children using css modules in a reactjs project using classNames and JSX

    How to make the page to fit screen width on mobile device?

    Last inherited display property is inline but computed is block. How is this even possible?

    How to re-use common css rules in css( sass ) [closed]

    how to make a CSS animation end point the right edge of the browser

    how to make background 100% on a top menu

    how to remove xlink default styling

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to include the PHP file that is outside the folder where main PHP file exists?

    How to make a background with 2 gradients in CSS

    How can I change the path to the css file dynamically?

    Bootstrap CSS - How to get control label with inline radios below it

    how can i add style with CSS to