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

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть такой случай: два блока float: left на одной линии, у одного из них фиксированная ширина, а другой должен занимать всю остальную ширину родительского:

<div class="container">
      <div class="first">Первый</div>
      <div class="second">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.  Aenean massa.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
</div>

.container {width: 80%;}
.first {float: left; width: 100px;}
.second {float: left;}

Дело в том, что на ширину второго блока должно оставаться на 100px меньше от общей ширины родителя. Если текст в нём не прывышает её, то всё хорошо: он остаётся слева от первого. Если больше - то съезжает вниз...

Как быть?

Извините за тупой вопрос.
С уважением,
Александр.

Answer 1

[Дима Паутов]

1) Вариант - ему обязательно нужно дать ширину 400 px, это если вы верстате на float'ах.
2) Вариант:

.container {width: 500px;}
.first {float: left; width: 100px;}
.second {margin-left: 100px}

Comments

[Alexander Lashchevsky]

Я не могу дать ему 400px, т.к. правильнее сказать, родительский тоже резиновый. Поправлю вопрос.

[Дима Паутов]

Дополнил ответ!

[Alexander Lashchevsky]

Я же говорю, вопрос тупой. :)
Спасибо, подойдёт.

Answer 2

[sams0m]

.container {width: 80%;}
.first {float: left; width: 100px; height: 100%;}
.second {}