Резиновый шаблон на div (слоях) и css

23 Январь 2012 Нет комментариев
Много решений в инете, о конструировании на слоях шаблонов страниц, но под мою задачу не было. Вот решил поделиться. ТЗ:
  • Три колонки (ничего нового, в принципе - не важно сколько их)
  • Все растягивается по ширине, пропорционально: левая - 20%; правая - 20%; центральная - 60% (ничего нового)
  • Слои не должны переноситься при ресайзе окна (тоже логично, но немного конфликтует со следующим пунктом)
  • При ресайзе слои должны ужиматься до минимально размера в 300px - левая и правая колонки, 400px - центральная
А проблема в том, что 300px получается больше 20% при общей ширине в 1000px, и слои переносятся если места не хватает. Итак, решение:
  • Ограничиваем слои в сжатии
  • Задаем параметры ширины в соответствии с ТЗ
  • Боковые слои выравниваем налево и направо. И обтекаем их центральным
Вот как-то так. Смотрим на практике: (далее...)