Home/ Questions/Q 5973059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:44:47+00:00

I’m working on a site, and thought I’d see if there is a better

  • 0

I’m working on a site, and thought I’d see if there is a better way to achive the same result.

The problem: The page is made up of several sections, each one with its own background, that should be the full width of the browser. The content within each section is in a 960px centered. At present I am wrapping each section in a, seemingly unnessary, wrapper. Does anyone have a better soloution?

Example Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .content{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    #header_wrapper{
        background: red
    }

    #content_wrapper{
        background: green
    }

    #footer_wrapper{
        background: yellow
    }
</style>
</head>

<body>
<div id="header_wrapper">
    <div class="content">
        Header Content
    </div>
</div>
<div id="content_wrapper">
    <div class="content">
        Content Content
    </div>
</div>
<div id="footer_wrapper">
    <div class="content">
        Footer Content
    </div>
</div>
</body> 
</html>

Ideal Solution: The same page but without the 3 extra wrapper divs.

Suggestions anyone?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your requirements are contradictory.

    You specify that each of the three sections should span the entire width of the page (and contain different background) but the contents of each of these must be restricted to 960px. A single div can not simultaneously have 100% width and 960px width. Short of doing some JavaScript magic where you mess around with the spacing, you can not achieve this without folded divs.

    • 0