css - Floating images to their own "column" without divs -

i recreate of following page on existing blog: http://jeff.klukas.net/bio/

the hallmark here have 2 columns, images on left , text on right without text wrapping underneath images. also, images appear @ vertical positions place them in context text.

the current design uses blueprint css pairs of divs each section of image , text. i'd create adaptive design crunches down single column smaller browser widths, source (generated markdown) like:

<img src=img1.png> <p>first paragraph...</p> <img> src=img2.png> <p>second paragraph...</p> 

which display on narrow screen as:

------------ |img1      | ------------ first paragraph ------------ |img2      | ------------ second paragraph 

or on wide screen as:

------------  first paragraph... |img1      |  more text more text ------------  more text more text               more text more text               more text more text               more text more text. ------------  second paragraph... |img1      |  more text more text ------------  more text more text               more text more text               more text more text               more text more text               more text more text. 

i can achieve of want little know of @media trickery, i'm not sure if it's possible achieve wide-screen layout want without messing html. dream?

i think should possible, if can determine or control width of images. on example layout, they're same width, should make life easier.

how this: narrow screen view, leave images are, , wider screen view, float images left, give paragraphs left margin wide enough move them out of image area, e.g.:

img {   float: left; } p {   margin-left: 400px; /* or wide images */ } 

...and serve using conditional media query @ screen width you'd images "pop out" at.

here's worked example. kittens. play width of output area, , should find kind of effect think you're looking for. when column narrower 400px, layout collapses single column. works fine me in safari , firefox; may need media-query-enabling shim make older versions of ie work, layouts should still work fine in it.