I have four small paragraphs on a page. Each have a small icon image to the left of the paragraph title. At the bottom of each paragraph I would like to place another small image, but to the RIGHT this time.

What's the best way to float just the bottom images of each paragraph to the right? I messed around a bit, but could only get both images to float to the right.

Should I just create a new div at the bottom of each paragraph for the images, or is there a better way to do it?


2 answers

danwellman 5600

You could put a class name on each of the second images?

img { float:left; }
img.right { float:right; }
Answered over 8 years ago by danwellman
  • Thanks. Can you elaborate on that a bit though, so I can understand adding class names better? I'm still new to that. Foppa over 8 years ago
  • I think Dan meant use it this way: `<img class="right" src="imgToGoRight.jpg" />` o.k.w over 8 years ago
  • A class name in CSS can be used to give a group of elements the same styles, like an ID attribute but shared between more than 1 element danwellman over 8 years ago
  • Awesome, thank you all. I completely forgot about that. Foppa over 8 years ago

If the images are not content then you can use CSS to style html elements placed in the content.


<p><i></i>text here<b></b></p>


i {
    background: url(image1.jpg);
    width: 10px;
    height: 10px;
b {
    background: url(image2.jpg);
    width: 10px;
    height: 10px;

Of course you'll have to adapt the specifics to your situation.

Answered over 8 years ago by Beau Smith