How to set the style of an image in a div class?

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

Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.

Use Firebug to debug your css.

Answer 2

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.

Answer 3

<img> & <p> are both block-level elements and so they line-break unless other wise specified. You need to position the <img> & <p> inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p> tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:

.even {
  width: 400px;
  display: block; /*or inline-block*/
  padding: 10px; /*just for a little visual spacing*/
}
.even img {
  position: relative;
  display: inline-block;
  float: right;
  margin-right: 25px;
}
.even p {
  display: inline-block;
  position: relative;
  width: 250px;
  float: right;
}

You should also move your <img> tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)