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.


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


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>

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.

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!

51 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:


    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

  19. […] I begin, I want to credit @scaron and his blog entry on how to handle the arrangement. My attempts left me with a leading indent on the first line of […]

  20. eCigAir says:

    Good day! I could have sworn I’ve been to thos website before but after browsing through
    many of the posts I realized it’s neww to me. Anyways, I’m definitely delighted I found it and
    I’ll be bookmarking it and checking back frequently!

  21. Time says:

    ×àñû âàøå âðåìÿ

    êðàòêàÿ âûäåðæêà

  22. Jacquetta says:

    cheap jerseys usaa (Jacquetta) New England Patriots Closeout Collectibles cheap jerseys

  23. Robertonilype says:

    Нет проблем – дизайн ногтей на Новый год порадует не только Вас, но и гостей.
    протоиерей Михаил Самохин Здравствуйте, Настя!
    Я ее помню, музыка была очень даже неплоха, но я предпочитал другие радиостанции.
    Из своего дома она может сделать светский салон, готовить необычные, изысканные блюда и по-прежнему тратить деньги — только уже не на развлечения и поездки, а на прием гостей, устройство интерьера, одежду для детей.
    Действительно, у них есть все необходимое для этого – убедительная мотивация своих действий, энергичность, умение воспринимать и обрабатывать информацию в любых объемах, готовность нести ответственность.


  24. Lisa says:

    I think IE need a hack:

    .content img {
    margin-left: -150px;

    Correct me if I am wrong – tks.

  25. raiditem is a safe site to buy FFXIV Gil. super cheap FFXIV Gil and wtb Gil FFXIV are avaliable here&klo2k. As a professional site for final fantasy xiv gil,we guarantee the safe and fast delivery. see more at:http://www.raiditem.com/

  26. Sean says:

    I used this solution for a div containing three images and to keep them from stacking, I just removed the “top: 0;” from the .content img css. Worked great!

  27. MonacoEscort says:

    מונאקו אסקורט מציג נערות ליווי חמות להזמנה עד לבית ולדירה הדיסקרטית שלכם.

  28. מונאקו אסקורט מציג תמונות אמיתיות ואותנטיות של נערות ליווי מאומתות באזור מרכז הארץ ורחבי ישראל.

  29. במונאקו אסקורט תוכלו להזמין שירותי סקס באזור תל אביב-יפו והסביבה.

  30. What’s up,I check your blog named “CSS tip: Float an image without text wrapping under it.Stéphane Caron – No Margin For Errors” on a regular basis.Your humoristic style is awesome, keep it up! And you can look our website about تحميل اغانى.

  31. 33Venus says:

    I must say it was hard to find your page in google. You write awesome posts but you should
    rank your website higher in search engines. If you don’t
    know how to do it search on youtube: how to rank a website Marcel’s way

  32. 76Allison says:

    Hi admin, i must say you have hi quality posts here.
    Your page can go viral. You need initial traffic boost only.
    How to get it? Search for: Mertiso’s tips go viral

  33. ChrisTEX says:

    test soft

  34. whoah this blog is magnificent i love reading your posts. Keep up the great work! You know, lots of people are searching around for this information, you can aid them greatly.

  35. love reading your blog! helped me so much with my designs, check out my latest site, i used this method there

  36. suba me says:

    uXRrDK Thanks so much for the blog.Much thanks again. Really Cool.

  37. כל הנערות ליווי הכי שוות בחיפה רק ב- דודא לתותה

  38. “ove reading your blog! helped me so much with my designs, check out my latest site, i used this method there”

    Read more about CSS tip: Float an image without text wrapping under it.Stéphane Caron – No Margin For Errors on:

  39. jun says:

    Your site is awesome. I visit your site every day and enjoy your favorite content

  40. I believe this is one of the such a lot vital information for me.
    And i’m satisfied reading your article. However want to observation on few common things, The web site taste is wonderful,
    the articles is truly excellent : D. Just right
    process, cheers

  41. Helpful info. Fortunate me I found your site accidentally, and I’m shocked why this twist of fate didn’t took place in advance!
    I bookmarked it.

  42. Exactly how would certainly you make use of $54384 to make even more money: https://hh-o-lp.blogspot.se?az=12 says:

    How to earn $ 8516 per day: https://earn-3btc-per-day.blogspot.com.br?n=66

  43. EASY SCHEME EARNINGS ON THE INTERNET from $6356 per day: https://bogazicitente.com/morebitcoins531437 says:

    TOP # 1 EARNINGS ONLINE from $6491 per day: http://leylearside.tk/en5av

  44. Boosting, Gaming Coaching

  45. Еarnings on thе Intеrnet from $7177 реr day: http://vmeucilfd.birtatlitarifi.com/39779 says:

    Paid Studiеs: Мake $6554 Or Mоrе Weекly: http://nzit.sovereignty2020.com/fae

  46. עיסוי says:

    best massage in all of israel, come have a pampering experience

  47. exclaimale says:

    There are 47943 km² of cultivated land in Uzbekistan, and it comprises 11% of the country’s total territory. In Uzbekistan, permanent crops occupy 3233 km² of the land. This comprises 1% of the country’s total territory. There are 44710 km² of arable land in Uzbekistan. and it comprises 10% of the country’s total territory. 44% of the population are working in agriculture. There are around 170000 tractors in use in the country. http://www.confiduss.com/en/jurisdictions/uzbekistan/economy/agriculture/

  48. lootwowgold says:

    World of Warcraft gold is the currency that all World of Warcraft players are crazy about, you can use World of Warcraft gold to buy anything you want in the World of Warcraft classic game, if you don’t know where to buy World of Warcraft gold in 2021, then I recommend you to check out the http://www.lootwowgold.com/wow-classic-us-Gold/ website.

  49. https://jmprice.net/
    very nice article looking forward to read more

Leave a Reply