Полностью резиновая верстка в DIV (есть 2 решения)

Question

[Yaraife]

Есть ли какая-то возможность, без использования скриптов сделать такое:

[Резиновый DIV, растягивается от содержимого][Резиновый див, который занимает все оставшееся место]

Подробнее: Нужно сделать так, чтобы один из блоков занимал столько пространства, сколько ему нужно, чтобы отобразить все свои inline и block элементы(Нет их? окей, ширина 0). А другой блок растягивался на всю ширину оставшегося пространства.

Похожие, но не подходящие варианты:

Причина: фиксированная ширина первого дива

<div style="width:200px;float:left;">Первый див</div>
<div style="margin-left:200px;width:100%;">Второй див</div>

Причина: Второй див залезает под первый

<div style="float:left;">Первый див</div><div>Второй див</div>

Причина: Работает именно так, как нужно, но IE6 не понимает данное значение.

<div style="display:table;">
<div style="display:table-cell;">Первый див</div><div style="display:table-cell;">Второй див</div>
</div>

Решение:

GruZZ и tenbits flack.ru/2008/08/26/semantic-coding-howto-6/
Способ: float:left; и owerflow:hidden;

<div id="All">
  <div id="div1">One</div>
  <div id="div2"> Two</div>
</div>

*{
  padding:0px;
  margin:0px;
}
#All{
 font-size: 2em;
 width:100%;
} 
#div1{
 float:left;
}
#div2{
 overflow:hidden;
 background: yellow;
}

MTonly tanalin.com/projects/display-table-htc/
Способ: эмуляция свойства display:table; при помощи расширения .htc

Answer 1

[Николай Садовников]

flack.ru/2008/08/26/semantic-coding-howto-6/?

Answer 2

[Дмитрий Сидоров]

<div style="float:left;">Первый див</div><div>Второй див</div>

Comments

[Yaraife]

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

А как вы сделали такое выделение? тег <-c-o-d-e-> дает другой результат (просто мелкий шрифт)

[KlonKaktusa]

тег source

Answer 3

[Дмитрий Бойко]

#div1 {
float: left;
background: blue;
color: white;
height:100%;
width:200px;
}

#div2{
height: 100%;
background: yellow;
color: blue;
margin-right:200px;
width:100%;
}
#all{
width:100%;
}

HTML

<div id=«all»>
<div id=«div1»> Content1 </div>
<div id=«div2»>Content2 </div>
</div>

Comments

[Дмитрий Бойко]

margin-right:200px; -> margin-leftt:200px;

[int03e]

Это уже не резина, какие пиксели.

[Дмитрий Бойко]

ну пусть ставит проценты… что ему мешает… пусть в личку пишет я ему из 5 дивов расскажу, как все сделать…

Answer 4

[MT]

Если табличное представление как таковое задачу решает, то присмотритесь к эмуляции display: table для IE6/7.

Comments

[Yaraife]

.htc
Все проблемы с ИЕ так или иначе решаются им…
Спасибо, не подумал, что и для этого бага написали свою .htc

Answer 5

[int03e]

Так а в чем вопрос?) cssdesk.com/TQbwx

Comments

[Yaraife]

Спасибо, но gроблема в том, что он отображает свой background под первым дивом.
И если попытаться внутри него делать дивы, они так же лезут под первый див.

Если использовать ваш метод, то дополню вопрос: как сделать во втором диве отдельный background?
А лучше полностью отделить его от первого дива, чтобы внутренние элементы тоже не лезли под первый див.

[int03e]

Ивиняюсь, но наверно спал плохо — не понял вопрос. В чем проблема, дивы во втором диве под первый лезут? Ну еще один сделал (желтый), все нормально.

[Yaraife]

Растяните второй див так, чтобы он не залезал под первый.
В вашем случае — растяните желтый див на все оставшееся пространство
Для наглядности сделайте им всем разную высоту, чтобы видеть кто под кого заходит.

Нужно, чтобы помимо синего блока существовал блок, который занимает все место белого квадрата, кроме синей части. т.е. растягивался на оставшуюся ширину.

Answer 6

[Александр Кит]

Просто как вариант, через display:table-*: cssdesk.

Comments

[Yaraife]

Да, хороший вариант, и он действительно работает как надо.
Но. к сожалению, IE6 не понимает такого значения как display:table-cell; поэтому область применения ограничена

[Александр Кит]

Да уж, не завидую тем, кому еще приxодится с ие<8 иметь дело. А GruZZ прав: cssdesc

Answer 7

[Дмитрий Бойко]

выложите картинку макета, поможем чем можем

Comments

[Yaraife]

cssdesk.com/aT6Bt — Вариант предложенный tenbits то, что нужно.
Интересует есть ли другие способы, кроме display:table-cell;

Answer 8

[Дмитрий Бойко]

cssdesk при всем уважение к выше написанному, я не думаю, что нужно так извращаться…

Comments

[Yaraife]

cssdesk.com/pmDre
Вот тут я в вашем коде добавил разные высоты, чтобы было наглядно.
Серый блок заезжает под светло-серый.