body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } #logo{ font-size: 45px; color: #FFF; } footer{ height: 45px; background: #f2784b; } nav .nav-wrapper{ background: #f2784b; } .tabs .tab{ text-transform: none; background-color: #f7f7f7; } .tabs .tab.disabled a{ color: #4e4e4e/*#ff956e*/; } .tabs .tab a:hover{ color: #717070/*#ffc2ac*/; } .tabs .tab a{ color: #4e4e4e/*#ff956e*/; } .tabs .indicator{ background-color: #969696; } table{ border: 1px solid #000; } * { margin: 0; padding: 0; } html, body { height: 100%; } #wrapper { display: flex; flex-direction: column; height: 100%; } content { flex: 1 0 auto; } footer { flex: 0 0 auto; } table{ margin-bottom: 5px; margin-top: 5px; } td {border: 1px solid #000; overflow: hidden; background: #fffbf2; } th{ border-radius: 0; background: #00b16a; color: #FFF; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Name</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <nav> <div class="nav-wrapper"> <a id="logo" class="brand-logo center">Name</a> </div> </nav> <div class="col s12"> <ul class="tabs"> <li class="tab col s3"><a class="active" href="#test1"><i class="fa fa-list" aria-hidden="true"></i> Расписание</a></li> </ul> </div> <content> <div id="test1"> <div class="row"> <div class="col l6 m6 s12"> <table class="bordered centered"> <thead> <tr> <th>Понедельник, 5 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> <table class="bordered centered"> <thead> <tr> <th>Вторник, 6 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> <table class="bordered centered"> <thead> <tr> <th>Среда, 7 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> </div> <div class="col l6 m6 s12 offset-l6"> <table class="bordered centered"> <thead> <tr> <th>Четверг, 8 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> <table class="bordered centered"> <thead> <tr> <th>Пятница, 9 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> <table class="bordered centered"> <thead> <tr> <th>Суббота, 10 сентября 2016</th> <th>Задано</th> </tr> </thead> <tbody> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tr> <td>Урок</td> <td>Домашнее задание</td> </tr> <tbody> </table> </div> </div> </div> </content> <footer> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </body> </html> There are two divas. The second div retreats from the first. 
It is necessary to make so that both diva were located in parallel, at the same level.
PS Materialize framework is used. In order to see the problem, it is necessary to reveal the code area (At the standard size of the code area, the divas take on the form I need)
