CSS - sencillo de dos columnas

Question

Tengo una página de líquido (100% de ancho) con este interior:

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

Necesito el texto junto a la imagen de no envolver alrededor de ella, pero para mostrar al lado de él (como en la ilustración), como otra columna. Al mismo tiempo, el texto debe abarcar todo el ancho de la página. Esto sería fácil al establecer un margen izquierdo en el texto, pero el problema es que no conozco el ancho exacto de la imagen. El tamaño de la imagen puede variar ...

¿Hay alguna solución para esto?

Answer 1

Intenta agregar desbordamiento: oculto; a tu contenido div Eso debería obligarlo a adherirse a sus columnas.

http://jsfiddle.net/BG7FA/

Editar Esto no funcionará en IE6 (que figura)

Answer 2

Combine float: left en ambos elementos con display: block en el texto.

Answer 3

La manera más fácil de hacerlo es crear una tabla con 2 celdas, una para la imagen y otra para el texto. No usarás css, pero funciona con cualquier navegador.

Answer 4

Esta es una suposición, pero yo esperaría que funcione.

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

La lógica es que un div (incluso un div flotante) debe expandirse para llenar el espacio disponible, y los padres no se estira o permitir el desbordamiento que se establecen ambos parámetros.