Резиновый блок и overflow: hidden ?

Question

[Максим Болтик]

Доброго времени суток!
Есть два блока DIV.
Один с фиксированной шириной и float: left.
Второй с float: left, overflow: hidden и резиновый по ширине.
Задача заключается в том, что бы спрятать не помещающийся в резиновый блок контент, при этом два блока должны остаться на одной линии (резиновый блок не переноситься, а занимает оставшееся место на странице).

<div style="width: 200px; height: 50px; float: left"></div>
<div style="float: left; width: auto; overflow: hidden"> Контент </div>

Answer 1

[SerDIDG]

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

Comments

[SerDIDG]

jsfiddle.net/JHc4w/

[Максим Болтик]

уже задавал, обрезать надо по ширине…

[SerDIDG]

На моём примере обрезается. Уберите флоат с резинового блока, и видс ауто там не нужен.

[SerDIDG]

Вот так к примеру: jsfiddle.net/JHc4w/2/

[Максим Болтик]

Спасибо, решение хорошее. Но у меня есть нюанс, если текста мало, то блок нужно ровнять по правому краю строки.

[SerDIDG]

Как то так, если правильно вас понял.
jsfiddle.net/JHc4w/5/

[Максим Болтик]

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

[SerDIDG]

jsfiddle.net/JHc4w/6/

[SerDIDG]

А если нужно в одну строку, то так: jsfiddle.net/JHc4w/7/

[Максим Болтик]

Почти, только текст должен выравниваться по левому краю и не переноситься на новую строку.

[SerDIDG]

Вы ведь написали, если мало текста, то блок прижимается к правому краю, как тогда текст может быть слева?

[SerDIDG]

Пример — 7 не переносит на вторую строку.

[Максим Болтик]

Поправка: текст правого блока и когда его много.

[SerDIDG]

Не могли бы вы нарисовать схематично оба состояния.

[Максим Болтик]

[Максим Болтик]

Всё верно, спасибо. Вот решение jsfiddle.net/JHc4w/7/ — Ваше последнее.

Answer 2

[Максим Болтик]

Большое спасибо SerDIDG решение в примере №7.