Menu
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:
What won't work:
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!
866
You'll have to wrap your text in its own container. Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Here is solution for your issue ( p { overflow: hidden} )
http://jsfiddle.net/simoncereska/BnQRW/
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
