You need to do this:

reference view

but it turns out only this way:

my result

Code:

body { background-color: darkslategray; font-size: 14px; margin: 10px; } header { display: block; margin: 10px; text-align: center; background-color: gray; padding: 15px; color: white; } nav { width: 25%; float: left; background-color: gray; padding: 15px; text-align: center; margin: 10px; } aside { width: 25%; float: right; background-color: gray; padding: 15px; text-align: center; margin: 10px; } section { width: 45%; display: inline-block; text-align: center;' background-color: gray; } footer { clear: both; color: white; background-color: gray; text-align: center; padding: 15px; margin: 10px; } 
 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="secondstyle.css" rel="stylesheet" /> </head> <body> <header> заголовок </header> <nav> навигация </nav> <section> <header> заголовок секции </header> <article> Текст артикля </article> <footer> Нижняя часть артикля </footer> </section> <aside> асайд </aside> <footer> футер сайта </footer> </body> </html>

    1 answer 1

    Use flexs and no problems. Link to the resource by flex

    Well, in your case, you just do not take into account the margin and padding

     body { background-color: darkslategray; font-size: 14px; margin: 10px; } header { display: block; margin: 10px; text-align: center; background-color: gray; padding: 15px; color: white; } nav { width: calc( 25% - 20px); /*Берем в учет margin*/ box-sizing: border-box; /*padding перестают увеличивать размер блока*/ float: left; background-color: gray; padding: 15px; text-align: center; margin: 10px; } aside { width: calc( 25% - 20px); /*Берем в учет margin*/ box-sizing: border-box; /*padding перестают увеличивать размер блока*/ float: right; background-color: gray; padding: 15px; text-align: center; margin: 10px; } section { width: 50%; display: inline-block; text-align: center;' background-color: gray; } footer { clear: both; color: white; background-color: gray; text-align: center; padding: 15px; margin: 10px; } 
     <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="secondstyle.css" rel="stylesheet" /> </head> <body> <header> заголовок </header> <nav> навигация </nav> <section> <header> заголовок секции </header> <article> Текст артикля </article> <footer> Нижняя часть артикля </footer> </section> <aside> асайд </aside> <footer> футер сайта </footer> </body> </html>