Question

This layout is practically everywhere on the web but no one seems to have provide any information on how it works. I need for the content to be centered and the background needs to extend the full width of the page Example http://www.fuerstlaw.com/ (the blue bg color extends the full width). How is this done using CSS? I feel like it’s something very simple but just can’t figure it out.

Here is my code as I am just trying to at least get the header working at this link to a test page of the site http://gsringolaw.com/home

body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}

#masthead {
    min-width: 100%;
    margin: 0px;
    padding: 0px;
    background-position: 0px 0px;
    background-color: #00304F;
    position: relative;
    z-index: 0;
}
#headertext {
    position: relative;
    width: 250px;
    height: 82px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    font-size: large;
    top: -41px;
    left: 704px;
}
#glow {
    height: 170px;
    background-image: url('images/glow.png');
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    top: -192px;
    left: -13px;
    width: 973px;
}


#logo {
    position: relative;
    background-image: url('images/gayleringo.png');
    background-repeat: no-repeat;
    width: 528px;
    height: 113px;
    top: 28px;
    left: 0px;
}

<div id="wrapper">
<div id="masthead" style="height: 171px">
    <div id="logo">
    </div>
    <div id="headertext" class="auto-style1">
        Louisiana: 504-975-0180<br />
        <br />
        Florida: 850-292-7059</div>
    <div id="glow">
    </div>
</div>
<div id="top_nav">
</div>
<div id="container">
    <div id="right_col">
    </div>
    <div id="page_content">
    </div>
</div>
<div id="footer">
</div>
</div>

Answer 1

To achieve this you need a wrapper and the actual div that holds the content.

<div id="wrapper">
    <div id="content">
        Content
    </div>
</div>

Then you set a background to the #wrapper and give a width and margin: 0 auto to #content to center it.

#wrapper {
    background: red;
}
#content {
    width: 960px;
    margin: 0 auto;
}

The outter div, because of its display: block, will extend to 100% of the page width. Then the inner div is centered with a fixed width. So actually, the background is not from the content itself, but from the wrapper.

What I like to do is to give the inner div a class of .inside and then apply to any div I want. For example:

<div id="header">
    <div class="inside">
        Header
    </div>
</div>
<div id="main">
    <div class="inside">
        Main content
    </div>
</div>
<div id="footer">
    <div class="inside">
        Footer
    </div>
</div>

You can see an example here: http://codepen.io/joe/pen/bxueF