CODEWITHSUNDEEP
htmlcsscolorsbackground
Chris Hooks
Chris Hooks

Reputation: 51

How do I center content and extend the background color to 100% of the page?

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>

Upvotes: 4

Views: 14279

Answers (8)

Angel Yan
Angel Yan

Reputation: 960

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

Upvotes: 4

LosoTheCreator
LosoTheCreator

Reputation: 85

    body {height:100%;font-size:12px;}

body, body > section, body > header {width: 100%;margin:0; padding:0;}

.container {width:960px; margin:0 auto;}

header {
  background: #1234ff;
  margin-bottom:3em;}

header .container {
  background: #123456;
  padding: 0 1em;
  *zoom: 1;/* clear floats fix - fix for IE*/}
header .container:after { /* clear floats fix */
  content: ""; display: table;   clear: both; }
/* Logo */
header h1, header h1 a {
  background: url('/images/logo.png') no-repeat; /*set the url of your image and make sure it does repeat*/
  height:60px; /*set this to the height of your logo*/
  width: 175px; /*set this to the width of your logo*/}

/*Now we want to float the logo and the phone number sections so that the appear on the left and right*/
header h1  {float:left;}
header aside {float:right;}
/*make logo clickable, must set anchor to same size as its parent*/
header h1 a {
  display: block;}

header aside {
  background: #123456;
  color:white;
  padding:.5em 1em;
  text-align:right;}

header p {font-size:2em;line-height: .75em;}

html

<body id="wrapper">
  <header>
     <div class="container">
       <!--use css to add image to h1--->
        <h1><a title="company name" rel="bookmark"></a></h1>
       <aside>
         <p>Louisiana: <a>504-975-0180</a></p>
         <p>Louisiana: <a>504-975-0180</a></p>
       </aside>
    </div>
  </header>
  <section>
    <div class="container" id="content">
      <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </section>

</body>

Upvotes: 0

nerdarama
nerdarama

Reputation: 493

Add another divelement outside your #wrapperand assign it a background-color.

 <div id="full-width">
    <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>
 </div>


 #full-width {
    width: 100%;
    background: #00304F;
 }

Upvotes: 2

zombiehugs
zombiehugs

Reputation: 717

You will need your colored DIV to have a width of 100%. Inside this DIV place your remaining DIV and any other elements/graphics with a set width and margin of 0 auto.

#masthead {
min-width: 100%;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #00304F;
position: relative;
z-index: 0;
}

#divInsideIt {
width:800px;
margin: 0 auto;
}

Upvotes: 0

ColacX
ColacX

Reputation: 4032

#content{
    width: 960px; //tells the div to be exactly 960px wide
    margin: 0 auto; //tells the content to be centered with 0 px to surrounding object
    background-color: red;
}

#background{
    width: 100%; //tells the outer div to be 100% of screen width
    background-color: blue;
}

create two div's one with id content thats inside the one called background.

Upvotes: 0

AgnosticDev
AgnosticDev

Reputation: 1853

You could try.

            <div id="wrapper">
              <div id="banner">
                <div id="banner-inside">
                   <div id="content">content</div>
                </div>
              </div>
            </div>

           //css
           #wrapper{
             width:100%;
           }
           #banner{
             width:100%;
             background-color:blue;
           }
           #banner-inside{
             width:980px;
             margin:0 auto;
           }
           #content{ position:relative; top:0;}

Upvotes: 0

john Smith
john Smith

Reputation: 17916

either the masthead has 

width:auto

and is outside of the wrapper

or the wrapper and mastahead have 

width:auto

Upvotes: 0

Colselaw
Colselaw

Reputation: 1079

The page you have as an example uses a background image. If you right click on the page, Inspect Element, then look at the Body, you'll see the following style got cascaded:

body {
  ...,
  background-image: url(images/bg-body.gif);
  background-repeat: repeat-x;
  background-position: 0px 181px;
}

Upvotes: 0

Related Questions