Вторник, 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

You have no rights to post comments

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