Как полностью заполнить область область родительского блока дочерними

[demoncheg]

Имеется фиксированный двухколоночный макет. Левая колонка - сайдбар, правая - контент. Вверху шапка, внизу "прилепленный" к низу футер. Все блоки, кроме футера, обёрнуты в #container, от которого позиционируется футер. Проблема в том, что дочерние блоки (сайдбар и контент) не фиксированные, и если один из них имеет бОльшую высоту, он "выезжает" за границу #container. Таким образом, футер оказывается парящим посреди экрана, в то время как выезжающий блок - уходит за нижнюю границу экрана.

Задача

Полностью вместить все дочерние блоки в родительский, чтоб они не выезжали, в то время как нижняя граница самого "высокого" из них должна совпадать с границей #container.

Решение

Пробовал overflow: hidden. Не устраивает, что блок обрезается, другие атрибуты overflow тоже не подходят. Пробовал даже вот так:

#container {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

#container: after {
	display: block;
	visibility: hidden;
	content: ".";
	clear: both;
	height: 0;
	font-size: 0;
}

Но, к сожалению, безрезультатно. Подскажите, пожалуйста, кто знает, - бьюсь уже 3-й день...

Edited July 16, 2011 by demoncheg

[savinzeek]

А html код можно

[Softlink]

а футеру

clear:both;

должно же помочь.

вот как-то так http://jsfiddle.net/C7LgW/

[demoncheg]

а футеру

clear:both;

должно же помочь.

Ну, вроде да, должно помочь... Но, наверное, что-то мешает позиционировать таким образом футер. В общем, выглядит так - тыц. Только что в голову пришло, может, проблема в:

 #menu_blocks {
     position: absolute;
 }

Но если убрать absolute, блок с контентом проваливается вниз (в реальном макете). Может, как-то можно прийти к компромиссу?

savinzeek, не весь, но он есть по ссылке. В принципе, там проблему видно невооружённым взглядом.

UPD: ну да, проблема, видать, в position: absolute... (Хотя блок всё равно выезжает за границы родителя, но хотя бы футер клеется к его низу.) Тогда как же эти 2 блока - меню и контент - на одном уровне выровнять? Через float?

Edited July 17, 2011 by demoncheg

[Softlink]

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

Посмотрите, здесь много всяких приемов.

http://forum.htmlbook.ru/index.php?showtopic=5870

[demoncheg]

Теперь вам надо прибить нормально футер к низу.

Хм, а враппером не комильфо? За ссылку спасибо.

[Softlink]

UPD: ну да, проблема, видать, в position: absolute... (Хотя блок всё равно выезжает за границы родителя, но хотя бы футер клеется к его низу.) Тогда как же эти 2 блока - меню и контент - на одном уровне выровнять? Через float?

Да, тут наверное лучше флоатами их расставить по местам.

[demoncheg]

Да, тут наверное лучше флоатами их расставить по местам.

А других способов точно нет? У меня меню в сайдбаре уже флоатами выровнены. Пробую выравнивать родительские блоки - получается какая-то белиберда.

[Softlink]

inline-block еще сделает вам две колонки

[demoncheg]

inline-block еще сделает вам две колонки

Не понимаю... не фурычит. Задавал инлайн-блок и для родителя (контейнера), и для контента, и для сайдбара, по отдельности и вместе - нихт ферштейн.

[Softlink]

http://jsfiddle.net/T4brx/

так, а чем же все-таки overflow:hidden не устраивает вас? Что в нем не так?

[demoncheg]

так, а чем же все-таки overflow:hidden не устраивает вас? Что в нем не так?

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

ЗЫ: Не совсем понял, а что по ссылке?

[Softlink]

так, а чем же все-таки overflow:hidden не устраивает вас? Что в нем не так?

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

ЗЫ: Не совсем понял, а что по ссылке?

Я не понимаю. Ну да, overflow обрезает все, что не входит в него. Вам надо, чтобы какой-то блок выходил за его пределы?

По ссылке пример решения на инлайн-блоках

покажите лучше макет, как все должно быть. Иначе мы тут до завтра будем спорить.

[demoncheg]

Я не понимаю. Ну да, overflow обрезает все, что не входит в него. Вам надо, чтобы какой-то блок выходил за его пределы?

Ну, мне надо, чтобы самый высокий блок либо оставался в пределах родителя, а не выезжал из него, либо выезжал, но от него позиционировался футер. Просто первый способ мне показался наименее трудным. Но вообще основная задача прибить футер к низу, не порушив вёрстку, а как это сделать - уже вторично.

Оверфлоу режет блоки по границе родителя, в лисе по крайней мере, что не есть гуд.

По ссылке пример решения на инлайн-блоках

Хм, не заметил там колонок, блоки же идут друг под другом.

покажите лучше макет, как все должно быть. Иначе мы тут до завтра будем спорить.

А как связаться с вами приватно? Личку тут что-то не могу найти...

[Softlink]

личка у вас еще не работает тут

Edited July 17, 2011 by Softlink

[demoncheg]

Softlink, скинул... Благодарю за вовремя оказанную и неоценимую помощь.

[Softlink]

Softlink, скинул... Благодарю за вовремя оказанную и неоценимую помощь.

не дописал в почте. Я бы полностью переверстал этот макет. Много там всего ненужного)

[demoncheg]

не дописал в почте. Я бы полностью переверстал этот макет. Много там всего ненужного)

Да уж, код - сам по себе, коллекция ненужностей. Но перевёрстывать рабочий вариант?! Увольте, я ж не мазохист какой-нибудь.

[Softlink]

не дописал в почте. Я бы полностью переверстал этот макет. Много там всего ненужного)

Да уж, код - сам по себе, коллекция ненужностей. Но перевёрстывать рабочий вариант?! Увольте, я ж не мазохист какой-нибудь.

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

а вы, кстати, на ИЕ 6,7 делаете упор? Там от многого можно было избавиться элементарным border-radius.

В старых ИЕ были бы просто квадратные блоки. Зато многих оберток можно было избежать.

[demoncheg]

У вас в макете я долго тыкался, разбираясь, что откуда растет))

Можно сказать, сей макет рос вместе с моими знаниями о нём.

а вы, кстати, на ИЕ 6,7 делаете упор? Там от многого можно было избавиться элементарным border-radius.

В старых ИЕ были бы просто квадратные блоки. Зато многих оберток можно было избежать.

Неа, в ИЕ 6-7 даже как сайт выглядит не проверяю. Да, в общем-то, их сейчас юзают 5-7%, но хотелось бы меньше - так что пускай после не-пойми-куда-попадания обновляются. По-хорошему, надо ещё думать о мифических юзерах, отключающих в браузере картинки, но хотелось бы, чтобы у них появилась мотивация в смене провайдера - так что...

Но при этом я ещё недостаточно явно вижу перспективу повального отказа от старых браузеров, чтобы переходить на новый CSS3, а уголков хочется. (Имею в виду, не таких мастодонтов как 6-й осёл, а предпоследние версии, как 8-й ишак или 10-я Опера.)

Edited July 17, 2011 by demoncheg

[Rossi25]

Привет! Может поможете и мне с версткой=) Мучаюсь в этой теме.

Вообще тоже хочется резиновость: шапка (% от окна) - две колонки(% от окна, левая фиксированная по ширине)-подвал(% от окна), прижалый к низу окна при малом контенте. И левая колонка чтобы продолжалась до подвала. Плюс желание обернуть все блоки картинкой-бордюром, причем левые и правые прятать при минимальной ширине окна. Буду признателен