content + sidebar как сделать равную высоту между ними?

[Temik2704]

Добрый вечер!

Есть главный блок main - в нем 2 блока - content и sidebar

Как сделать так чтобы любой из них выравнивался по высоте большего блока?

Т.е. если в content получается больше информации и он стал больше сайдбара,то сайдбар подтягивается к нему по высоте и наоборот?

 

Вот макет по которому делаю:

http://cs413616.vk.me/v413616149/5558/j9grtCN4nEQ.jpg

 

Вот мой макет

http://cssdeck.com/labs/doi6kbsh

[swandev]

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

[Temik2704]

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

[npofopr]

Обычный двух колоночный макет 

http://csstemplater.com/

[Z1gnet]

в данном случае я так понял главная задача это потянуть фон. можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску или градиентом сделать фон (это в случае если нет резины)

если есть резина то можно через табличные свойства

#main-block{display: table;}#content,#sidebar{display: table-cell;vertical-align: top;/* убрать флоат */}

[npofopr]

 

в данном случае я так понял главная задача это потянуть фон. можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску или градиентом сделать фон (это в случае если нет резины)

если есть резина то можно через табличные свойства

#main-block{display: table;}#content,#sidebar{display: table-cell;vertical-align: top;/* убрать флоат */}

display: table-cell; дедовский способ? да вы шутите...

[swandev]

 

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

 

 

А чем плох такой способ?

К тому же, можно схитрить и сделать только видимость того что сайдбар равен ширине контента.

Вырезать полоску с фоном, и повторять для враппера.

[Aleksandr.L]

 

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

 

 

Ну если без позиционирования, без таблиц, JavaScript'ов, то можно сделать что-то в этом духе: http://jsfiddle.net/ufFV6/2/, правда это не совсем гениальное и практичное решение.

Edited November 20, 2013 by Aleksandr.L

[Z1gnet]

display: table-cell; дедовский способ? да вы шутите...

читайте внимательнее, не нужно все сообщение в одну кучу лепить. про дедовский способ было к этому куску

—————-

 

можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску

 

 

Ну если без позиционирования, без таблиц, JavaScript'ов, то можно сделать что-то в этом духе: http://jsfiddle.net/ufFV6/2/, правда это не совсем гениальное и практичное решение.

ну так уже 2 раза писали про фоновую картинку на обертку. вы создали лишние блоки, можно сразу 2 цвета на один блок задать. как я уже писал либо репит полоской с 2мя цветами, либо градиентом.

Edited November 20, 2013 by Z1gnet