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?

Thanks

2 answers

danwellman 5600
1
point

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

img { float:left; }
img.right { float:right; }
Answered almost 7 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 almost 7 years ago
  • I think Dan meant use it this way: `<img class="right" src="imgToGoRight.jpg" />` o.k.w almost 7 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 almost 7 years ago
  • Awesome, thank you all. I completely forgot about that. Foppa almost 7 years ago
0
points

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

HTML:

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

CSS:

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 almost 7 years ago by Beau Smith