CSS - simple two columns

I have a fluid page (100% width) with this inside:

开发者_StackOverflow社区[image-fixed-width] | [text-fluid-width -----------------------------------]
                    | -----------------------------------------------------
                    | -----------------------------------------------------

I need the text next to the image not to wrap around it, but to display next to it (like in the illustration), like another column. At the same time, the text needs to span across the entire page width. This would be easy to by setting a margin-left to the text, but the problem is that I don't know the exact width of the image. The image size can vary...

Is there any solution for this?

Try adding overflow: hidden; to your content div. That should force it to stick to your columns.

http://jsfiddle.net/BG7FA/

Edit This will not work in IE6 (go figure)

Combine float: left on both elements with display: block on text.

The easier way to do this is to create a table with 2 cells, one for the image and one for the text. You won't use css but it works with any browser.

This is a guess, but I would expect it to work.

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

The logic is that a div (even a floating div) should expand to fill the available space, and the parent will not stretch or allow overflow as both parameters are set.