CSS - simple two columns

Question

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

[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?

Answer 1

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

Answer 2

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.

Answer 3

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)

Answer 4

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.