Aligning images

Is there a way in CSS to get the same affect as the following without using tables. I want an image next to text. The text can consists of multiple paragraphs. The image needs to be to the left of the text and align to the vertical center of the paragraph(s).

With tables it's easy:

<table><tr><td><img src="theimage.jpg"/></td><td><p>Paragraph text</p><p>Paragraph text 2</p></td></tr></table>

HTML:

But how can I achieve the same in CSS and ensure that it looks the same in all browsers (without using hacks). Any ideas?

 

You can float the image to the left / right.

<img src="theimage.jpg" alt="text" style="float:left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci odio, facilisis ut, condimentum quis, vulputate vitae, enim. Cras urna elit, semper ut, mattis quis, sagittis eget, pede. Etiam dapibus augue aliquam nunc. Nunc eget leo ut lorem fringilla suscipit. Aliquam mattis nonummy pede. Fusce sit amet sapien. Nulla suscipit, diam nec interdum pellentesque, elit lectus facilisis odio, ac fermentum lorem ante ut est. Morbi id velit a purus tempor euismod. Ut a velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et augue sit amet purus sagittis ultrices.
<br /><br />
Nam vitae orci. Donec tincidunt lacus in orci. Sed et massa sed libero gravida molestie. Curabitur vel tellus. Nunc nec odio id purus porttitor lobortis. Donec lobortis ultrices urna. Cras pede sapien, feugiat sed, auctor cursus, placerat sed, augue. Fusce porttitor. Curabitur ante ligula, ornare vel, lobortis sit amet, ornare nec, pede. Nam justo. Nulla dignissim, risus sit amet blandit pretium, nibh diam facilisis est, a varius nisi dui non purus. Phasellus vitae nisi. Mauris vel tortor. Etiam eget diam ut dolor imperdiet vehicula.

Code (markup):

might be what you are looking for.

 

Floating the image works for short paragraphs, but when it comes to longer paragraphs/mulitple paragraps. The text continues under the image, which I don't want.

 

It shouldn't. I use it all the time. You might want to add some padding to the bottom perhaps to give it a little room?

 

I've added padding. Doesn't quite look the way I want it, but it will have to do.

 

See vertically centering content ....

This is the applicable css;

.outer {
    position: relative;
    display: table;
    vertical-align: middle;
    height: 300px;
    width: 300px;
    margin: 25px auto 0;
    border: 1px solid black;
    }

.inner {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    }

.mid {
    border: 1px dashed silver; /*for clarity*/
    }

/*Now the hack for obsolete browsers-ok, just IE*/
/* \*/
* html .inner {
    top: 50%;
    left: 0;
    }

* html .inner .mid {
    position: relative;
    top: -50%;
    }
/* */

Code (markup):

cheers,

gary