Как правильно выровнять блоки в три ряда css html?

Question

[Stacy None]

Добрый день!
Вот сайт Помогите пожалуйста правильно выровнять левый sidebar, контент перекрывает его.
Что я делаю не так?

Comments

[Rustam Bainazarov]

Ещё один «скрипт для вебмастера». Откуда они вообще все вылезли?

[Сергей Горячев]

SmthTo, не говори. И зачем плодить.

Answer 1

[Alibek Kulseitov]

Нужно писать ширину в процентах а не в пикселях. На родитель вешать class clearfix.
В интернете почитайте про .clearfix

Answer 2

[Waydim]

в данном случае ИМХО самый простой и быстрый способ - подключить фреймворк Bootstrap и раз и навсегда забыть о таких проблемах.

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-2">
// ....левая колонка....  //
</div>
<div class="col-xs-12 col-sm-8">
// ....центральная часть....  //
</div>
<div class="col-xs-12 col-sm-2">
// ....правая колонка....  //
</div>
</div>
</div>

и тут уж точно никто ни на кого не "наедет и не закроет", да плюс к тому для мобильной версии уже сразу все адаптировано.
Если без Bootstrap и в продолжение совета Alibek Kulseitov , то тоже самое:

<style>
.box{display:block; position:relative; width:100%;}
.left-bag, .right-bag, .center-bag{display:inline-block; float: left; vertical-align:top; padding:0; margin:0}
.left-bag, .right-bag{width:25%}
.center-bag{width:50%}
</style>
<div class="box">
<div class="left-bag">
...
</div>
<div class="center-bag">
...
</div>
<div class="right-bag">
...
</div>
<div class="clearfix"></div>
</div>