There is a layout for the rubber layout of the form:

<div class="wrapper"> <header></header> <main></main> <footer></footer> </div>

Styles:

 .wrapper { width: 1400px; margin: 0 auto; } header { background: /* картинка шириной 1400px */ } main { background: /* картинка шириной 1400px */ } footer { background: /* картинка шириной 1400px */ }

Due to the fact that 1400px is not the best option for most budget laptops and for almost all netbooks, it was decided to 'shorten' the site on the sides, the benefit is where. But you need to save the side parts of the backgrounds. Those. it turns out like this: enter image description here

  • Gray - margin wraps
  • Red - hat, green - content, blue - footer
  • Dark shades of colors - the part of the blocks that will be hidden if the screen width is less than 1400px

I do not quite understand how to do this correctly. You can, for example, put inside a header div, in which there will be everything. And then set the div-width 1200px and margin: 0 auto . Are there any other options?

  • Try instead of static width just limit on the minimum and maximum size, respectively min-width, max-width - Dmitriy Kondratiuk

1 answer 1

Use margin for nested blocks, and if necessary padding for wrapper .

HTML:

 <div class="wrapper"> <header>Header </header> <main>Main </main> <footer>Footer </footer> </div>

CSS:

 .wrapper {background: pink;padding:10px;} header {background:red;height:200px;margin: 0px 20px;} main {background:green;height:200px;margin: 0px 20px;} footer {background:yellow;height:200px;margin: 0px 20px;}

You can see an example here: https://jsfiddle.net/NikitaSmith/7rvgq1pg/6/