Вторник, 04 Сентября 2012 18:53

Резиновая верстка с фиксированными сайдбарами

Written by 
Оцени эту запись
(6 Голоса)

Как сделать резиновую верстку, где будут левая и правая колонки фиксированной ширины, а средняя часть (контент) будет тянуться относительно ширины экрана? Этот вопрос могу смело поставить на первое место в рейтинге любимых вопросов на собеседованиях)))

 

 

Ответ:

 

<div style="width: 100%; background: pink; height: 300px;">
         <div style="width: 300px; margin-right: -300px; float: left; background: green; height: 300px;"></div>
         <div style="padding-left: 300px; background: blue; height: 300px;">
                 <div style="float:right; margin-left: -200px; width: 200px; background: red; height: 300px;"></div>
                  <div style="padding-right: 200px; background: yellow; height: 300px;"></div>
         </div>
</div>
 
 
Здесь получится левый сайдбар (зелененький) шириной 300px, правый сайдбар (красненький) шириной 200px и следняя часть (желтенькая), которая тянется.
 
Смотрим Демо

 

Разберем немного подробнее. 
 
Есть основной блок с шириной 100% (розовый). У него есть два дочерних блока:
 
1. Фиксирована ширина (наш левый сайдбар), свойство float, свойство margin-right равныи ширине блока с минусом
2. Единственное нужное свойство для него - отступ слева, равный ширине левой колонки - padding-left
 
 
Если вам  нужен только левый сайдбар, на этом можно остановиться. Если нужен и правый, продолжаем дальше. 
 
У второго дочернего блока, в свою очередь, есть два дочерних:
 
1. Правый сайдбар с фиксированной шириной, свойством float: right и отрицательным отступом на всю ширину margin-right: -200px. То есть, тут все аналогично, только зеркально.
2. Также аналогично. Единственное важное свойство - padding-right: 200px.
 
 
Фишка в том, что антоматически блоку выставляется ширина 100%, если только у него не прописан float. У наших фиксированных блоков есть ширина, свойство float (чтоб соседний встал рядом) и отрицательных отступ, равный ширине, с нужной стороны. У соседнего же блока с той же стороны стоит padding, равный ширине фиксированного.
 
 
 
 

Additional Info

Комментарии  

 
0 #5 Леонид 15.04.2017 20:12
Отличная и наглядная статья!
Респект!
 
 
-2 #4 zapica 09.02.2016 21:25
Чё мудрите! Открываете демо там где написано затем видим демо там 3 цветный блока. левой кнопкой мыши кликаем там и выбираем Исходный код страницы появится новое окно в браузере.у меня мозила. затем скапирывали всё и всё готовый шаблон ваш...Я со всех сайтов так понобрал то что нравилось и 3 сайта уже сдела. всё идеально один уже давно на сервере. Ваше всё просто!Я и тут даже нечего читать не стал сс ки коды и всякую херню. просто забрал код ;-)
 
 
0 #3 kat-khmara 28.07.2014 10:10
Видимо, код обрезался...
 
 
0 #2 Екатерина 28.07.2014 06:56
Почему-то код не отображается
 
 
0 #1 Екатерина 28.07.2014 06:54
Еще можно так:







Только расположить понятно надо.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов