Как сверстать гибкий (резина + статика) 3х колоночный макет?

Question

[Александр]

Привет, коллеги!

Верстаю макет в 3 колонки:
1. левый сайдбар 300px
2. контент - резина
3. правый сайдбар 200px

Так как сетка предполагается сильно адаптивной - нужно максимально простую верстку колонок сделать, чтобы легко было ими манипулировать.

Правая колонка при уменьшении ширины окна должна уходить под контент, поэтому порядок следования колонок в разметке менять не хочется.

Использовать calc опасаюсь (зря?), возможен трафик со старых браузеров.

Бутстрап не использую, flexbox пока тоже.

Вот эта раскладка: https://jsbin.com/roqiqokine/edit?html,css,output

<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="content"></div>
   <div class="sidebar_right"></div>
</dv>

.sidebar_left {
   float: left;
   width: 300px;
}

.sidebar_right {
   float: right;
   width: 200px;
}

.content {
   margin-right: 200px;
   margin-left: 300px;
   padding: 0 50px;
}

В этой раскладке проблема - правая колонка уползает вниз. Если поменять в разметке колонки content и sidebar_right местами - то все чинится, но это плохой путь.

Подскажите правильный путь?
Спасибо.

Answer 1

[Андрей]

https://jsfiddle.net/r4s1w6zv/
или так
https://jsfiddle.net/r4s1w6zv/2/

Comments

[coderlex]

Так нельзя. Перекроет футер.

Answer 2

[coderlex]

С float'ами всегда сначала рисуйте плавающие элементы (в данном случае сайдбары).
И только после этого обычную статику.
Т.е.:

<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="sidebar_right"></div>
   <div class="content"></div>
</dv>

А чтобы сделать адаптив в вашем случае, используйте изначальный вариант html, но в стилях - через table-cell и (min-|max-)width.

Answer 3

[kolibry1]

попробуйте всё же бутстрап. Он не так страшен, как его малюют. скачиваете и подключаете библиотеки, тратите 20мин на изучение названия классов-колонок, и вуаля.
и кстати, пятиколоночный бутстрап тоже есть.