Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру.
Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил.
Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки.
HTML:
<div class="page-wrapper">
<div class="left-panel-wrapper">
<div class="left-panel">
some content some content some content some content some content some content some content some content some content
</div>
</div>
<div class="content-wrapper">
<div class="content">
some content some content some content some content some content some content some content some content some content
</div>
</div>
<div class="right-panel-wrapper">
<div class="right-panel">
some content some content some content some content some content some content some content some content some content
</div>
</div>
</div>
CSS:
.page-wrapper {
display: table;
width: 100%;
height: 100%;
}
.left-panel-wrapper, .right-panel-wrapper {
display: table-cell;
width: 100px;
height: 100%;
background-color: #f6f8fa;
}
.left-panel, .right-panel {
display: inline-block;
}
.content-wrapper {
display: table-cell;
}
.content {
width: 100px;
margin: 0 auto;
}