CSS - Positioning images next to text

Posted by jpjoki on Stack Overflow See other posts from Stack Overflow or by jpjoki
Published on 2009-06-30T21:32:58Z Indexed on 2010/05/29 20:32 UTC
Read the original article Hit count: 199

Filed under:
|

Hi,

I'm doing a site in which images need to presented next to textual content - a sort of pseudo two-column layout, as the images and text come from a single html source.

I've found quite a simple way to do this by putting the images as their own paragraphs and floating them. Would there still be a more simpler way (in regards to html) to do this without these extra paragraphs and by only attributing extra css to images?

If the floated image is in the same paragraph than the text, then paragraphs with and without images would be different in width.

EDIT: Basically, I'm looking for as simple HTML markup as possible to position images like this. The CSS can be complex ;)

CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }


Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>


Is the above possible with this HTML?
<p><img src="image.jpg" /></p>

© Stack Overflow or respective owner

Related posts about css

Related posts about positioning