Menu
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?
316
if you want to have dynamic height, and not to use an image for bg, i think it is the best practice
163
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
