CSS Multiple Wrapper Layout Scheme
Often, when developing, you come across layouts in which blocks have a background that spans the entire width of the page, and the content of these blocks is centered. Here is an example of such a layout:
In such a layout, we will have to make not one wrapper, but several - for each block. At the same time, inside the wrapper there should be another block that performs content centering. There should also be a class responsible for painting the content with a background.
The general outline of our layout will look like this:
<div class="wrapper">
<div class="center">
</div>
</div>
<div class="wrapper line">
<div class="center">
</div>
</div>
<div class="wrapper">
<div class="center">
</div>
</div>
<div class="wrapper line">
<div class="center">
</div>
</div>
The center class will be used to center the blocks:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
The line class will be used to color the blocks:
.wrapper.line {
background-color: #008040;
color: white;
}
And the wrapper class will be the parent of each block. We use it to set the indentation between blocks:
.wrapper {
margin-bottom: 30px;
}
Let's now write the full code for our task:
<div class="wrapper">
<div class="center">
<h1>Main site header</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our company</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Our price</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our contacts</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
margin-bottom: 30px;
}
.wrapper.line {
background-color: #008040;
color: white;
}
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
.wrapper h1 {
margin: 0;
font: 40px "Times New Roman";
}
.wrapper h2 {
margin: 0;
font: 25px "Times New Roman";
}
.wrapper p {
font: 16px/1.4 Arial;
text-align: justify;
}