css page layout - foreground "overlying" background - html

Question

I recently started to get familiar with web application development and struggle with a basic css layout question.
The desired layout is a central area overlapping several background elements.
See here:
This image shows the desired layout:
I have also hacked it on codepen:
Codepen
Where I use html divs to build the background around the central area.
<div class="page-element">
<div class="element-side"></div>
<div class="element-middle"></div>
<div class="element-side"></div>
</div>
and css to place it like that:
.page-element {
display: flex;
}
.element-middle {
width: 90%;
}
.element-side {
flex: 1;
}
But the way I did it there doesn´t look like proper layout style.
What is the right way in modern css to do such a layout?

Answer 1

Since most of your structure is fine I kept it, and the major changes is how to create the left/right gutter and the overflow on the header/footer.
For the left/right gutter I simply removed the side elements, kept the width: 90% and used margin: 0 auto to horizontally get things centered.
For the header/footer overflow I removed the below-nav/footer1 elements, added pseudo elements on the main (done with CSS only) and an extra bottom/top padding on the header/footer so the pseudo won't overlap their content.
.nav1, .nav2, .nav1 > div {
display: flex;
background: #f05d23;
}
.nav-elem {
flex: 1;
}
.nav1 > div, .nav2 > div {
margin: 0 auto; /* added, center horiz. */
width: 90%;
text-align: center;
padding: 1em;
box-sizing: border-box;
}
.nav2 > div {
padding-bottom: 3em; /* added, avoid overlap */
}
.main {
position: relative;
display: flex;
background: #e4e6c3;
}
.main::before, .main::after { /* added, create overflow */
content: '';
position: absolute;
left: 5%;
width: 90%;
height: 3em;
background: #f7f7f2;
}
.main::before {
top: 100%;
}
.main::after {
bottom: 100%;
}
.main section {
margin: 0 auto; /* added, center horiz. */
width: 90%;
padding: 1em;
box-sizing: border-box;
background: #f7f7f2;
}
.footer {
display: flex;
background: #2d2a32;
}
.footer section {
margin: 0 auto; /* added, center horiz. */
width: 90%;
padding: 1em;
padding-top: 4em; /* added, avoid overlap */
box-sizing: border-box;
text-align: center;
color: #f7f7f2;
}
body {
padding: 0;
margin: 0;
}
h1, h2 {
font: bold 2em Sans-Serif;
margin: 0 0 1em 0;
}
h2 {
font-size: 1.5em;
}
p {
margin: 0 0 1em 0;
}
<div class="nav1">
<div>
<div class="nav-elem">Plan</div>
<div class="nav-elem">AdminPlan</div>
<div class="nav-elem">Help</div>
<div class="nav-elem">Login</div>
</div>
</div>
<div class="nav2">
<div>
<h1>Pageheader.</h1></div>
</div>
<div class="main">
<section>
<h1>Main Content</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by
arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had
recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then
turned to look out the window at the dull weather. Drops</p>
</section>
</div>
<div class="footer">
<section>
<h2>Footer</h2>
<p>Whatever goes into a page </p>
</section>
</div>
Note, the .footer section's padding value in padding-top: 4em; can of course be added to the existing shorthand property like this: padding: 4em 1em 1em; (/* top | horizontal | bottom */)

Answer 2

Here's an example of how to achieve that - sorry but have been typing.on mobile.
https://jsfiddle.net/su5w1595/
.wrapper {
Position: absolute;
Height:100%;
Width:100%;
}
.top {
Position:relative;
Background-color:blue;
Width:100%;
Height:30%;
}
.middle {
Position:relative;
Background-color:red;
Width:100%;
Height:30%;
}
.footer {
Position:relative;
Background-color:yellow;
Width:100%;
Height:30%;
}
.main {
Position:absolute;
Top:20%;
Left:10%;
Height: 60%;
Width:80%;
Margin:auto;
Background-color: white;
}