CSS tip: Float an image without text wrapping under it.

December 10th 2009

I thought I’d share this little CSS tip that can be useful to some of you.

Let’s say you have this content that contains a thumbnail, you want to float the thumbnail but don’t want the text to wrap under it like below.

thumb_bad

Instead you want the thumbnail to float and the text beside it, in it’s own column, like below.

thumb_good

Well that’s fairly easy to do, your markup should look something like this:

<div class="content">
    <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p>
</div>

Now what you actually do, is that instead of floating the thumbnail, you “position:absolute” it inside the content and add padding to the content so the text displays beside the thumbnail.

You CSS should look something like that:

.content {
	padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
	position: relative; /* So the thumbnail is relative to this */
}

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

This should produce the result below. What actually happen is that the thumbnail which is absolutely positioned don’t take the padding of it’s container into account. That’s why it can be positioned over the padding.
thumb_padding

Working demo

Check out my working demo to see it in a real world example.

Bottom line

So by using this technique you’re always sure your text will never wrap under your thumbnail, that’s one less thing to worry about!

18 Responses to “CSS tip: Float an image without text wrapping under it.”


  1. Robert says:

    If the position of .content is relative, should not the absolute image then be positioned relative to the page? I didn’t try it though.

  2. Stephane says:

    @Robert: If the container has a position:relative, then the thumbnail will be positioned relative to it, it’s when there’s no position specified that the thumbnail will be positioned relative to the page.

    I created a working demo page for you guys to check it out: http://www.no-margin-for-errors.com/demos/css-tip-thumb-floating/

  3. Troy Walters says:

    Thanks for the article. I have been playing around with my blog, looking for this type of thing. It looks cleaner and seems to be replacing the old normal float style.

  4. Adam C says:

    If you didn’t want to resort to absolute positioning you could do somethng like below, floating the image.

    I am a title that will appear next to the image
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam….

    #content:after { /* do the clearfix or other float clearing here */ }
    #content img { float: left; margin-right: 10px; }
    #content p { margin-left: 0px; }

  5. Trevor Davis says:

    The title of the article is a little misleading because technically the image is not floated.

  6. Sean says:

    Problem with this solution is that this only allows for one image. Multiple images would end up stacking on top of each other.

    This is just off the top of my head, but a better solution would involve floating the image, and then applying a negative margin to it that is equal to the padding on the containing div. So on img, you would do something like float:left and margin-left:-75px.

    Putting a clear on the image would ensure that multiple images flow properly down the page.

  7. CSS tip: Float an image without text wrapping under it….

    This article describes how to float an image without having the text wrap underneath it. Clever technique.

  8. Stephane says:

    @Sean: I’ll try that out, sounds better to me. Thanks for the suggestion.

  9. Dan says:

    @Sean Brilliant. Your solution works with multiple images, although I would change margin-left to a padding-left to keep the border in check. Then of course subtract the width by the padding-left, in this case 75px, to maintain the original dimensions of the content.

  10. Paul says:

    Hey

    Does anyone have an updated example for use with multiple images?

    Cheers guys!

  11. Bob says:

    Mine comes out great but the pic is on top not to the side??

  12. Kos says:

    Nice tip, but it doesn’t work well if text in paragraph is too short.

  13. MValdez says:

    Hey, thanks a lot. I’ve spent too much time trying to fix a website I’m working on before finding this post. As you said: “that’s one less thing to worry about”.

    Thanks and regards, MV.

  14. Buy Things says:

    Excellent beat ! I wish to apprentice even as you amend your website, how can i subscribe for a blog website? The account aided me a appropriate deal. I had been tiny bit familiar of this your broadcast offered vivid clear concept

  15. tom says:

    Another possibility is padding the bottom of the image. padding-bottom:50px;

  16. cyhkdohjql says:

    yenvzop.nbshjo.gps.fsspst, fhujyywcir

  17. Thanks a lot,
    it worked for me.

  18. U really have to get yourself a dvd . these are generally most pleasant cheap wow gold ever before they are really type and chic

Leave a Reply