4

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>
Chris Hooks
  • 51
  • 1
  • 1
  • 3

8 Answers8

4

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

Angel Yan
  • 960
  • 7
  • 10
2

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;
 }
nerdarama
  • 493
  • 2
  • 5
  • 18
0

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;
}
Colselaw
  • 1,069
  • 9
  • 21
  • I thought about this one but I need multiple colors, and I wasn't sure if would work. Angel Yan answered my question below using the the background property. I thank you for your response! – Chris Hooks Jan 08 '13 at 00:24
0

either the masthead has 

width:auto

and is outside of the wrapper

or the wrapper and mastahead have 

width:auto
john Smith
  • 17,409
  • 11
  • 76
  • 117
0

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;}
AgnosticDev
  • 1,843
  • 2
  • 20
  • 36
0
#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.

ColacX
  • 3,928
  • 6
  • 34
  • 36
0

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;
}
zombiehugs
  • 717
  • 3
  • 10
0
    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>
LosoTheCreator
  • 85
  • 1
  • 7