Between section, aside and nav do not overlap the margin, how to fix it?
And how to make the footer not move into section and aside when moving to .container? https://jsfiddle.net/8jaxx1x9/1/

<div class="container"> <nav> <ul> <li class="selected">item1</li> <li class="item"><a href="#">item2</a></li> <li class="item"><a href="#">item3</a></li> <li class="item"><a href="#">item4</a></li> <li class="item"><a href="#">item5</a></li> <li class="item"><a href="#">item6</a></li> </ul> </nav> <section> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis enim debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam quaerat quisquam aliquid explicabo beatae quidem ipsam quia?</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.</p> </section> <aside> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!</p> </aside> </div> <footer>Ленива Компани!</footer>

I have no idea how to put CSS here, I'm grateful for the help.

    2 answers 2

    A vertical (side) margin is never superimposed (does not collapse), so there is no way to fix it.

    To prevent the footer from running into section and aside when placing the footer in the container element, you must place the element with the clear: both property in front of the footer, or apply this property to the footer itself.

    What you need to read to avoid such questions:

    1. Articles about the float property and its effect on the behavior of elements
    2. Clear property articles
    3. Margin Collapse Articles
    4. хаке clearfix

     body { font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } h1 { font-size: 20px; font-weight: bold; margin-bottom: 6px; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { background: #eaeaed; margin-bottom: 24px; *zoom: 1; } section { float: left; width: 63.197026%; } aside { float: right; width: 29.3680297%; } .container, nav, section, aside, footer { border-radius: 6px; } section, aside, footer { background: #2db34a; color: #fff; margin: 1.858736059%; padding: 20px 0; text-align: center; } section { float: left; width: 63.197026%; } aside { float: right; width: 29.3680297%; } nav { background-color: #2db34a; margin: 1.858736059%; text-align: center; } nav ul { margin: 0px; padding: 5px 0px 5px 0px; } nav ul li { display: inline; padding: 5px 10px 5px 10px; border-radius: 6px; } nav ul li a:link, nav ul li a:visited { color: white; border-bottom: none; font-weight: bold; text-decoration: none; } nav ul li.selected { background-color: lightgreen; font-weight: bold; color: white; } @media all and (max-width: 420px) { section, aside, footer { float: none; width: auto; } } 
      <div class="container"> <nav> <ul> <li class="selected">item1</li> <li class="item"><a href="#">item2</a></li> <li class="item"><a href="#">item3</a></li> <li class="item"><a href="#">item4</a></li> <li class="item"><a href="#">item5</a></li> <li class="item"><a href="#">item6</a></li> </ul> </nav> <section> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, facilis enim debitis commodi sequi tempora dolores suscipit est, eum error rerum laboriosam quaerat quisquam aliquid explicabo beatae quidem ipsam quia?</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis. Excepturi voluptates eum mollitia repellendus.</p> <p>Itaque aut in eius repellendus, eaque, quaerat voluptates vero, ipsam recusandae, et unde. Aut, ut?</p> <p>Eaque maxime eos, doloribus voluptatibus harum placeat, pariatur amet, perspiciatis officia hic corrupti, numquam repudiandae.</p> <p>Consequuntur aperiam ullam dolores labore veritatis tempore magnam ducimus qui, voluptatum aliquam, dolorem, vel expedita!</p> <p>Quidem, ipsa aperiam sequi qui. Optio aliquid, sed nisi inventore illo totam quisquam vero sit.</p> <p>Tenetur reprehenderit minus facilis veritatis debitis quos totam incidunt, excepturi dolores error obcaecati, rerum molestias.</p> <p>Ab nam ex hic numquam expedita, sint amet voluptate et, modi impedit aut? Incidunt, placeat.</p> <p>Libero nemo ab saepe iure sed tempora adipisci! Mollitia, ratione delectus. Inventore eos nesciunt consequuntur!</p> <p>Quos, tempore. Error saepe ullam distinctio modi perspiciatis? Incidunt voluptatum, esse dolorum veniam provident similique!</p> <p>Fuga, labore, laboriosam aut laudantium officiis hic vitae, cum consectetur dolore, recusandae repellendus quisquam voluptates!</p> </section> <aside> <h1>Lorem ipsum dolor sit amet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facere!</p> <p>Quaerat iusto debitis sunt, distinctio sed magnam at vel. Ratione.</p> <p>Soluta repellat assumenda consectetur, voluptas ex cumque doloremque similique quia.</p> <p>Doloremque rerum, quos earum maiores deleniti consequuntur natus facere quam!</p> <p>Voluptatibus perferendis natus saepe nesciunt et eveniet vel voluptates enim?</p> </aside> <div style="clear: both"></div> <footer>Ленива Компани!</footer> </div>

      Margin collapse does not work for blocks with float installed. You can verify this by removing the float from the styles. Vertical margins will collapse.

      When positioning columns, I recommend not using vertical indents for the columns themselves. Instead, you can set vertical indents for the content inside the columns. And then - vertical margins will correctly collapse.

      In your example, I collected the content in section, aside, and footer blocks into simple divs, and styled them like this:

       section, aside, footer { background: #2db34a; color: #fff; margin: 0 1.858736059%; padding: 20px 0; text-align: center; } section > div, aside > div, footer > div { margin-top: 1.858736059%; margin-bottom: 1.858736059%; }

      However, it would be possible, for example, to set the upper margin of the header in the section. It is the first element inside the section, and its margin-top would collapse with a margin-bottom of nav.

      Jsfiddle working example