CSS help – full browser width background with defined width body

  • Resolved siriusly

    (@siriusly)


    13 years, 10 months ago

    Greetings… hope I’m posting this in the correct place… please correct me if not. Couldn’t find a specific CSS WP forum.
    I am seeking a little CSS help for defining a full browser width background that extends only to the top and bottom of the body div. The page display is limited to the center 960 pixels of the display window. So far, I can make one of these things work properly, but not both at the same time.

    There’s a screenshot of what I am trying to achieve here: http://sirius.johnsoncreative.com/lam/wp-content/uploads/comps_marked.jpg

    I’d also welcome a recommendation for a theme that I could build this on and/or create a child theme for.

    Many thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Max

    (@clementsm)

    13 years, 10 months ago

    You have to use multiple divs to achive that… a structure something like:

    <div id="header-container">
  <div class="content-wrap">
      <!-- header stuff -->
  </div>
</div>
<div id="content-container">
   <div class="content-wrap">
      <!-- body stuff, content, loop etc... -->
   </div>
</div>
<div id="footer-container">
   <div class="content-wrap">
      <!-- footer stuff -->
   </div>
</div>

    and css like:

    #header-container,
#content-container,
#footer-container {
  width: 100%;
  overflow: hidden;
}
#header-container {
  overflow: visible; /* so the menu can fall into the div below */
}
#content-container {
  background-color: #xxxxxx; /* whatever that color you want is */
}
.content-wrap {
  width: 960px;
  margin: 0 auto; /* center the content in the browser window */
  overflow: hidden;
}

    You can probably custom write a theme like this really easily…

    Thread Starter siriusly

    (@siriusly)

    13 years, 10 months ago

    Awesome. Thank you clementsm! It was the content container piece with the nested body content div that I wasn’t getting. I usually start with something like Starkers, so this will work great! Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS help – full browser width background with defined width body’ is closed to new replies.