How to right-align image if small or stretch if wide

I have news articles on my homepage at http://wearabletechforums.com
Sometimes the images I use are small like so:


Other times the images are wide like so:

Is there some way I can use the same HTML/CSS code to wrap both types of images that will automatically display the wide images as they are now, but will move small images to the right side of the text?

Hi,

Interesting question but I don;t think its possible with css alone.

You could do it if the image was on top of the text and do something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
    max-width:1170px;
    margin:auto;
    padding:10px;
    border:1px solid #000;
}
article {
    display:block;
    clear:both;
    padding:10px;
    overflow:hidden;
    border-bottom:1px solid #000;
}
article img {
    float:right;
    clear:both;
    margin:0 0 10px;
    max-width:100%;
}
.article p {
    min-width:300px;/* to stop small columns at the side of large images*/
    margin:0 0 10px
}
</style>
</head>

<body>
<div class="wrap">
        <article> <img src="http://placehold.it/350x150">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor velit libero, ut commodo libero interdum a. Praesent at sollicitudin nibh. Nulla condimentum elementum dolor, quis feugiat tellus molestie a. Mauris feugiat leo a justo tempor lacinia. Aenean laoreet nunc quis purus dignissim, vitae vulputate ex faucibus. Donec malesuada, diam at posuere convallis, justo diam tristique velit, eleifend pellentesque neque velit vel felis. Etiam sed gravida sem. Aenean rhoncus tempus luctus. Suspendisse leo turpis, bibendum sit amet tincidunt quis, convallis finibus est. Nulla facilisi. Aliquam et accumsan neque. Pellentesque bibendum bibendum accumsan. Aliquam quis porttitor mauris. </p>
        </article>
        <article> <img src="http://placehold.it/1200x250">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor velit libero, ut commodo libero interdum a. Praesent at sollicitudin nibh. Nulla condimentum elementum dolor, quis feugiat tellus molestie a. Mauris feugiat leo a justo tempor lacinia. Aenean laoreet nunc quis purus dignissim, vitae vulputate ex faucibus. Donec malesuada, diam at posuere convallis, justo diam tristique velit, eleifend pellentesque neque velit vel felis. Etiam sed gravida sem. Aenean rhoncus tempus luctus. Suspendisse leo turpis, bibendum sit amet tincidunt quis, convallis finibus est. Nulla facilisi. Aliquam et accumsan neque. Pellentesque bibendum bibendum accumsan. Aliquam quis porttitor mauris. </p>
        </article>
        <article> <img src="http://placehold.it/500x200">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor velit libero, ut commodo libero interdum a. Praesent at sollicitudin nibh. Nulla condimentum elementum dolor, quis feugiat tellus molestie a. Mauris feugiat leo a justo tempor lacinia. Aenean laoreet nunc quis purus dignissim, vitae vulputate ex faucibus. Donec malesuada, diam at posuere convallis, justo diam tristique velit, eleifend pellentesque neque velit vel felis. Etiam sed gravida sem. Aenean rhoncus tempus luctus. Suspendisse leo turpis, bibendum sit amet tincidunt quis, convallis finibus est. Nulla facilisi. Aliquam et accumsan neque. Pellentesque bibendum bibendum accumsan. Aliquam quis porttitor mauris. </p>
        </article>
</div>
</body>
</html>

However, I can’t see a way to do the same thing with the image appearing underneath the text. Floated elements must come first in source which is what you need to have them at the right of the text but then when they are 100% wide they will take up the whole width and appear on top of the images.

Hrm. Okay, well thanks anyway. I’ll try wrapping the small images in HTML with HTML BB Code.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.