How to float paragraph next to image without wrapping the image?
You can do this without JS. See my fiddle http://jsfiddle.net/VaSn6/5/
Put the image and paragraph side-by-side:
<img />
<p>text</p>
With CSS:
img {
float: left;
margin-right: 10px;
clear:both;
}
p {
margin-left: 0px;
overflow:auto;
display:block;
}
My jsfiddle extends the example to clearing paragraphs and right-aligned images.
I needed something like this that was CMS-friendly and marketing-team friendly (marketers are scared of divs!)
This works down to at least IE8.
If you need vertically-centered images next to text, you'll need some divs: http://jsfiddle.net/VaSn6/12/ This will only vertically center longer text than images.
Or if you're ok with CSS tables, I'd go with http://jsfiddle.net/sY4H8/1/ (also ok down to IE8). That works even if the text is less tall than the image.
Here is some simple CSS for doing this job.
img {
float: left;
border: 1px solid black;
margin: 5px 10px 10px 0px;
}<p>
<img src="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.
</p>