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

Question

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

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

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

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

Answer 1

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

http://jsfiddle.net/BG7FA/

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

Answer 2

Комбинированный float: left на обоих элементах с display: block на текст.

Answer 3

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

Answer 4

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

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

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