float fluid image left with out text wrapping

Question

There is no reason this should be difficult to achieve. Back in the way day you could just create a table and put the image on the first cell and the text on the second. Easy as pie.

For some reason I am having a hell of a time getting this to work with css, and I know css pretty fluently. I'm sure I'm just overlooking a hopefully easy answer.

What I'm looking to achieve:

• Dynamic sized (being pulled from database) image floated to the left - Description text to the right with out wrapping below image when it reaches the image height.

What won't work:

• Setting a margin-left on the text (width of image is not consistent)
• Setting a width / floating right on text (again, image width is dynamic so proper width on text would be unknown)

Example Code (pre css):

<div class="demo">
    <img src="dynamic_sized_image.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Hopefully there is an answer!!

Thank you!

Answer 1

Here is solution for your issue ( p { overflow: hidden} )

http://jsfiddle.net/simoncereska/BnQRW/