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>
Имеются два дива. Второй див отступает от первого.
Необходимо сделать так, чтобы оба дива располагались параллельно, на одном уровне.
P.S. Используется фреймворк Materialize. Для того, чтобы увидеть проблему, необходимо раскрыть область кода (При стандартном размере области кода дивы принимают необходимый мне вид)