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!

Solution

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

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

Comments

[rkingon]

Holy Moly I can't believe it is that easy... I knew I was missing something. Thank you SOOO much.. I wish I could Vote Up but I require more rep points =/

[rkingon]

I was debating using java - or even store image width in cms then provide inline css... however it appears there is a way... overflow:hidden; on the text. it worked!

[rkingon]

Hi so um, wondering by any chance if you could explain WHY this works? It doesn't really make sense.. heh

[cjbarth]

This works, but it doesn't allow text to be vertically centered on the image, or the image to be vertically centered on the text (depending on which is taller). It is a real shame that the only way to reliably vertically center things is using tables.

[Andrea]

@rkingon: colinaarts.com/articles/the-magic-of-overflow-hidden seems to explain it