Best way to have a page with different width - html

Question

I have to create a page with this structure:
Where the RED part has width = 100% and BLUE (and GREEN) part has width 885px.
I thought to create different width, some with width = 885px and the others with width 980px... but I think this is not the right approach... in fact if I have to change the width for example from 885px to 980 px
Another solution I think could be to have to div... the first one has width 100%; the second one, inside the first one, has width 885px. But I think could be difficult to place the green div at the same height/top of the red one on the back.
Which approach would you used to reach the goal?
Thank you

Answer 1

You need to manage simple html like below:
<div class="wrapper">
<div class="wrap"></div>
</div>
.wrapper{
width: 100%;
}
.wrap{
width: 885px;
margin: 0 auto;
}
When you only need full width div don't include .wrap in your html. And when you only need 885px width div exclude .wrapper in your html.

Answer 2

I made a quick example of how you could do this right here. I just made two classes, one that has a width of 100% (red div), and one that has a fixed width (blue div, I used 450px in my example). The green div is just a blue div inside a red div. I hope my example answers all the questions you have. Good luck!

Answer 3

I guess you can manage the red with green band and sencond red band positioning absolutely in a main container, that also contains the blue one with a width. To explain it better i've created a JsFiddle please follow the link to see it working:
Working example
I've use the approach suggested #C-link Nepal, but I think to put red bars this isn't enough.
HTML:
<div class="top"></div>
<div class="main">
<div class="redgreen">
<div class="green"></div>
</div>
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="foot">
</div>
CSS:
.top {
background-color: red;
height: 50px;
}
.main {
text-align: center;
position: relative;
}
.green, .blue {
width: 600px;
margin: 0 auto;
}
.redgreen {
width: 100%;
background-color: red;
position: absolute;
top: 30px;
}
.red {
height: 30px;
position: absolute;
top: 150px;
background-color: red;
width: 100%;
}
.green {
background-color: green;
height: 100px;
}
Please note that most of CSS classes have height and background color to the pattern be drawn...