CSS - две простые колонки

Question

У меня есть жидкая страница (ширина 100%) с этим внутри:

[image-fixed-width] | [text-fluid-width -----------------------------------]
                    | -----------------------------------------------------
                    | -----------------------------------------------------

Мне нужно, чтобы текст рядом с изображением не оборачивался вокруг него, а отображался рядом с ним (как на рисунке), как в другом столбце. В то же время текст должен охватывать всю ширину страницы. Это было бы легко сделать, установив поле слева для текста, но проблема в том, что я не знаю точную ширину изображения. Размер изображения может варьироваться ...

Есть ли какое-то решение для этого?

Answer 1

Попробуйте добавить переполнение: скрыто; к вашему контенту Это должно заставить его придерживаться ваших столбцов.

http://jsfiddle.net/BG7FA/

Редактировать Это не будет работать в IE6 (рисунок)

Answer 2

Это предположение, но я ожидаю, что оно сработает.

<div style='width:100%; overflow:hidden'>
   <img style='float:left'/>
   <div style='float:left'>my text</div>
</div>

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

Answer 3

Самый простой способ сделать это - создать таблицу с 2 ячейками, одну для изображения и одну для текста.Вы не будете использовать CSS, но он работает с любым браузером.

Answer 4

Объедините float: left на обоих элементах с display: block на тексте.