Question

I want to do something like this:

    .even {
        float: left;
        text-align: left;
    }

    .even img {
        float: right;
    }

It’s not working though. I’m hoping my problem is just a syntax one, but I can’t see to figure out how to do this. I’ve dug around google, but I’m having trouble finding the right set of keywords.

The associated html I’d like to use should look something like ths:

<div class="linkBlock even">
    <img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/> 
    <h2><a href="http://www.etsy.com/shop/oilcanpress" rel="nofollow">oilcan press</a></h2>
    <p>
        oilcan press is a purveyor of handmade books & word-related artefacts.
        if you'd like to commission work of a particular size or shape or theme let him 
        know via etsy or email: oilcanpress [!at] gmail.com
        they will gladly make custom boxes as per your general requests of colors/concepts.
        if you are desirous of sevral items a bundle can be arranged at reduced prices.
    </p>
    <p>
        you can view much of his work on <a href="http://www.etsy.com/shop/oilcanpress">flickr</a>.
    </p>
</div>

I’d like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it’s not floating, it looks like it’s still using the static layout.

Answer 1

I’m only a CSS dabbler but I think this should work:

div.even>img {
    float: right;
}

This matches child img elements inside a div with class even.