Question

I have this image floated to the left of text working fine using the css below. How would I repeat the effect for an image to the right of text on the same page. Do I need a clearfix between the left and right for example?

Thanks

.innercontent {
padding: 0 0 0 185px;
position: relative; 
text-align:justify;
}

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

Answer 1

make the css more specific such as:
What i do is create master super class: .fl and .fr for float left and float right and just apply it as i go makes my code cleaner and easy to follow when they see it through out the html document.
.innercontent img.fl{
padding: 0 0 0 185px;
position: relative;
text-align:justify;
}

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

just post to this if wasn’t clear 😀