Sunday, November 13, 2005 (Image floats, without the text wrap!)

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it.

The example below can easily fall apart without the proper CSS in place:

The HTML:

  1. <div class="callout">
  2. <h3>team report, replaced image</h3>
  3. <h2>Team Report 10-06-05</h2>
  4. <p>Eric Koston and Rick McCrank are still in Toronto, having a killer time filming for the upcoming éS video with filmer Scuba Steve.</p>
  5. </div>

And the CSS to get started:

  1. .callout {width: 275px;}
  2. .callout h3 {
  3. width:115px;
  4. height:65px;
  5. float:left;
  6. text-indent:-8008px;
  7. background:transparent url(team-report.gif) no-repeat 0 0;
  8. }

The important part is that you have your <h3> (in this case, an image replacement) floated left. Any html that comes after your <h3> will now wrap around it. Take a paragraph for example:

That’s the easy part. Now, how do we keep that paragraph from wrapping? Your first instinct might be to increase the height of .callout h3, we’ve all tried to get away with that method in the past. You’ll tell yourself – the content will never be more than five lines long. Deep down inside – you know this isn’t the case & that you’ll be editing that bit of CSS in the near future. And then a month after that; and then the following month and then… well you’ll be editing that css until the entire site gets redesigned; which you know isn’t happening anytime soon.

So, we need a future proof method to keep this content tight, the way your pixel princess intended it to be.

One solution might be to put a width on the paragraph tag and float it right. Let’s try:

  1. .callout p {
  2. width:160px;
  3. float:right;
  4. }

Resulting in:

Not a bad start. With this in place, any content in a paragraph tag will never wrap under your image. Unfortunately, chances are this content is variable & is being pulled from a database. Who knows what HTML will be spit out. It’ll fall apart if say, instead of a paragraph, you had an unordered list:

This doesn’t quite hold up very well, does it? So let’s change the .callout p { } declaration to .callout * { } instead. The * selector will select P’s, UL’s & any HTML that falls under .callout :

  1. .callout * {
  2. width:160px;
  3. float:right;
  4. }

Our new declaration solves that quite nicely indeed. There’s just one problem. What if some HTML appears deeper? Take these potential list items for example:

Some basic HTML, will render as this:

This really screws things up. Cleary we only want .callout * { } to apply to parent elements, and not their children, no matter what they are. So let’s overwrite any child’s width & float values with:

  1. .callout * * {
  2. width:auto;
  3. float:none;
  4. }

Quite literally, the .callout * * { } declaration says: if any html element contains any HTML element, do { width:auto;float:none;}.

There it is, exactly what we want & it’ll work in all current browsers (including IE!). Throw any HTML at it, with any varying amount of content & you’ve got some lean & mean & pretty basic CSS to prevent it from wrapping under your floated image.

Your final css:

  1. .callout {
  2. float:left;
  3. width:275px;
  4. }
  5. .callout h3 {
  6. width:115px;
  7. height:65px;
  8. float:left;
  9. text-indent:-8008px;
  10. background:transparent url(team-report.gif) no-repeat 0 0;
  11. }
  12. .callout * {
  13. width:160px;
  14. float:right;
  15. }
  16. .callout * * {
  17. width:auto;
  18. float:none;
  19. }

View the final HTML: CSS Image floats, no text wrap.

Did you find this post helpful?

Posted in code, interweb, skateboarding, tech

111 comments:

  1. joe d #

    Nice writeup. I take back all the mean things I say about u.

  2. haveboard #

    good stuff

  3. Ryan Merket #

    Great tutorial, thanks for sharing!

  4. bjoern #

    I dont understand that in your markup. For what reason did you take a headline element which will be replaced via CSS?

    This messes up your semantic code (h3 before h2, without any meaningful content) and the same result could also be accomplished by adding this background-stuff to the .callout-, some padding-left and all that children-tweaking css would be obsolete.

    Your article headline does not clearly reflect your articles meaning. For me, your markup is not really an image float with text-wrap.

  5. Cristian #

    very well written article. useful stuff.

    thanks a lot

  6. trovster #

    I’ve used the star star effect before because it works in IE. But :first-child is so much better.

    You could then use *:first-child. However, to avoid that problem of anchors and such I’d keep it more specific with…

    .callout ul, .callout ol, .callout p, .callout div {}

  7. kubox #

    This has bugged me forever – cheers!

  8. Michael Zipser #

    Yes, this is really a good way to style images and text. I can use it in my new project. Thank you!

  9. Derek A #

    You could also give the other items a left margin (equal to the header image width)

    e.g.,

    .callout h2, .callout p, .callout ul
    {
    margin-left:115px;
    }

  10. pup #

    Nice work. I came up with another technique that accomplishes something similar about a year ago.

    http://www.pupinc.com/files/test/float.html

    it’s currently in use in the shacknews.com comments (the comment blocks flow around the ads).

  11. manuel #

    please check IE

  12. sosa #

    If you don’t mind reading spanish, I have acomplished a similar effect with my “Vaccum Injection Technique”, maybe you want to check it up.

    the text:
    http://www.nolimit-studio.com/yosoysosa/archives/categorias/tutoriales/inyeccion_de_vacio.php

    the examples:
    http://nolimit-studio.com/yosoysosa/tutorials/samples/vacio.html

    http://nolimit-studio.com/yosoysosa/tutorials/samples/vacio2.html

  13. Bill #

    Manuel, do you see an error in IE? Looks fine in IE mac & pc(v.6) from here.

  14. Jeff #

    Nice, but what if your output contains an ?

  15. Jeff #

    let’s try that again — nice, but what if your output contains an h3?

  16. Bill #

    Very true Jeff – Perhaps it’s a better idea to put a class on the H3, instead of the .calllout h3, good eye!

  17. Mani Sheriar #

    Thanks for this – it’s thourough and useful. I like how you thought out all the possibilities. Good stuff!

  18. Pelle #

    I am really wondering why someone would choose this method over giving the right text a left margin? It seems superior because then you only have to specify the margin to be the same as the width – no advanced substraction!!

  19. Dustin #

    This is actually more complicated than it has to be.
    All you need is one two paragraphs. one with the image, the other with the content. float the image left, and give the content a left margin… Yea, what Pelle said above…that’s the same thing I’m saying.

    In essense, it would look like this:

    p.img { float:left;width:100px; }
    p.content { margin-left:110px; }

    piece of cake.

  20. Jerome Dahdah #

    Very interesting method. I’ve never considered using * * until now, so thanks for the inspiration.

    One thing that bothers me with this method, however:

    .callout * {
    width:160px;
    float:right;
    }

    The fixed widths suggest that all images will always have the same width, otherwise the method would break. While it’s good to specify general image sizes in a web styleguide, it’s not always going to work, e.g. when you have a client using a CMS, unless you have built in some failsafe such as server-side image manipulation or hard-coded widths on your image-tags. And besides, it’s not always desirable. I’d like more flexibility.

    Is there any way to get this method working completely without specifying any widths? Because currently, as others have suggested above, the method with specifying a left margin and positioning the image/h3 absolutely (or by giving it a negative left-margin, and several other methods), or specifying a left padding and placing the image as a background image, is simpler, and it does the same job.

  21. cpawl #

    In essense, it would look like this:

    p.img { float:left;width:100px; }
    p.content { margin-left:110px; }

    piece of cake.

    Dustin

    Exactly. I don’t understand what the big discovery is here. It seems that this method is a step backwards rather than forward. There seems to be quite a few methods that can achieve the same job.

    It would be nice for someone to test various methods… this one seems like an overkill… but what the hell do I know.

  22. Bill #

    The method I’ve outlined is merely an attempt to cover as many variations of html as possible, using as few css declarations as possible. I found it to be the best solution to the problems we were facing.

    Indeed, if what you’re trying to accomplish can be achieved with Dustin’s css, than there’d be no need for something like this.

  23. marko Petkovic #

    Smart solution. I like that way of thinking.

  24. John #

    I agree with cpawl
    here is another method that works just fine.

    p.img{
    float: left;
    width: 124px;
    margin: 10px 10px 10000px 10px;
    }

  25. dave #

    The simplified methods (as per Dustin’s suggestion) work fine when you only have one image and a paragraph of text…
    … but the second paragraph obviously can’t contain other markup such as lists or headings, so in those instances where a whole mess of html content needs to sit alongside the image (lists, headings, paragraphs etc – or even a form), Bill’s method is pretty lean in that you don’t have to nest that content in another container.
    Each to their own depending on the requirements of the situation, I guess…

  26. Ari #

    you’re all speaking greek? How’s a novice to learn anything? Leave off the jargon…we already know you’re smart. :)
    P.S: I appreciated the problem solving…very interesting methods

  27. GoofyDawg #

    This seems like a lot of work that you could do with a single CSS definition:

    .fltBox {
    width:350px;
    background:url(floater.gif) 5px 9px no-repeat;
    background-color:#FFF;
    padding:6px;
    padding-left:91px;
    border:1px solid black;
    }

    BTW, floater.gif is an 80px X 50px image.

    To use, just do this:

    <b>Non-wrapping text!</b>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis aliquam bibendum urna. In fringilla, enim quis dictum rutrum, nisl nisi </p>
    </div>

    No negative margins, no extra classes, and yes, it’ll work on any HTML you throw at it. Plus it’s semantic.

  28. GoofyDawg #

    Oops… missed my opening div tag:

    <div class=”fltBox”>

  29. Bill #

    Goofydog – You’re right, that method would work fine . The only thing you’d be missing out on is getting your image in there as an H3, which likely, isn’t a big deal.

    You are wrong however in thinking that an H2 can’t come directly after an H3. It doesn’t matter what order they appear in. My H2 is more important than my H3, no matter where they sit in my HTML, therefore you’d mark them up as such.

  30. CodeBit.cn #

    good !
    thanks !

  31. anoop #

    NIce write up. But what happens when there are a lot of question marks. I find that wrapping do not work in this case ???? ????? ??? ???? ??? ??? ???? ?? ??? ???? ???? ?????

  32. Vent Swap #

    This’s what’s called the magic of the CSS!
    Thanks a lot.

  33. Dave #

    It seems that some of the “just do it with two <p> tags” type of comments wouldn’t work for me &em; I prefer to code the XHTML as purely semantic as possible, and then code the CSS with no or very very little change to the XHTML. To me, adding extra tags and paragraphs and divs is not really a quality solution.

    Therefore, I really like the *, ** method here. It’s all CSS with no change required to the XHTML.

  34. Paul #

    You can do this without widths or dimensions being applied. Just use overflow:auto on the content container that sits next to a floated image and that’s it.

    You need the height:1% hack for ie6 and under but apart from that it works most everywhere that overflow is not an issue for you.

    http://www.pmob.co.uk/temp/image-overflow2.htm

    The images can come for a database and be any size you like within reason. Of course if the content container can’t be squashed anymore then a scrollbar will appear, but in a fixed width container this won’t be an issue.

    Just thought I’d share in passing :)

  35. Shao69 #

    Good Job

    it’s really nice and easier. Thanks a lot from Lyon (France)

  36. tobto #

    thanks! css has vast possibilities

  37. Web Design Glasgow #

    Very useful, particularly the using * *{ – simple, but I hadn’t thought of it. Thanks from Glasgow.

  38. Richard #

    Take care if your text area is less than 1/2 of the total container width. Once the elements slip under the image, they will float up against each other!

  39. Wayne #

    I ended up using goofydog’s recommendation for my purpose. I wanted to create a “talkback” section in posts where I encourage people to comment. The idea was I wanted to pose my question to the reader but wrap the question in an image where it says “This is where YOU join in” and a graphic on the left for consistency. None of the solutions worked right for me, so I used the one goofydog recommended, and then added a “p” inside of that with a padding-top.

    I’m sure there’s a better way to do it, but that’s what worked for me. Now if I could just get tinymce to stop messing with my tags :)

  40. Auris #

    I also used goofydog’s recommendation which works great for 1 box & 1 image. However for multiple boxes I need to have a different image in each box.

    Any ideas on how I can achieve this with just the one piece of CSS code?

  41. Khaan #

    Thanks

  42. Electronics Kid #

    Great Job.

    This was very smart and useful.

  43. Jon Williams #

    Nice writeup. Reading this was helpful. Thanks.

  44. Honour Chick #

    very useful info… thanks

  45. tr.gg css tasarımlar #

    a wonderful css using to solve wrap problems

  46. www.249designs.com #

    Awesome TOOT!!.. Used it myself. :)

  47. Diane Brandt #

    Thanks! Very helpful information.

Sites that have linked to this post:

  1. Take My Advice ...
  2. 53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
  3. ? -Idea of Life » ????????53?CSS??
  4. lillbra » Blog Archive » links for 2007-01-28
  5. Zhu Zhongwei » Blog Archive » CSS????[??]
  6. Blog » Blog Archive » For Webmaster only
  7. 53 ultramodern css techniques | A Blog you can use
  8. CSS Float Theory: Things You Should Know | Smashing Magazine
  9. » 25 Code Snippets for Web Designers (Part4)
  10. Web????25?CSS????
  11. CalinSoft » Blog Archive » 53 Tecnicas ultramodernas con hojas de estilo (CSS)
  12. Web-Design Blog » Blog Archive » CSS Float Theory: Things You Should Know
  13. CalinSoft — 53 Tecnicas ultramodernas con hojas de estilo (CSS)
  14. bilgiservisim » 53 mükemmel css örne?i
  15. Design For Masters » CSS Float ? ?????? ? ?? ????????
  16. 53 CSS-Techniques at NeoStyle
  17. » Essential Web Design Bookmarks SharpProgrammer.Com
  18. UizL » Blog Archive » 53 Tecnicas CSS
  19. 53?CSS-??????? - ZeroZ
  20. 101 CSS Techniques Of All Time- Part 1
  21. 440design | ???CSS?????101? part1
  22.   Image Floats by The Resourced :: Color, CSS, Flash, Fonts, Illustrator, Photoshop, and more
  23. Wobado » Blog Archive » 101 CSS Techniques Of All Time- Part 1
  24. 101?CSS????????(?) | ????
  25. » Jumbo Pack: A Hundred And One All Time CSS Techniques! Candid Software Weblog -Web Designing, hosting, ecommerce, content and more!
  26. Recursos y Tutoriales » Blog Archive » Tecnicas Css 2ª parte
  27. 53 CSS-Techniques | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması
  28. 125 Code Snippets for web designers | PaulSpoerry.com
  29. 五毒 » Blog Archive » 101个CSS技术高级应用教程(上)
  30. Best Solution for Web :: 101 CSS Techniques Of All Time :: July :: 2008
  31. 三色设计驿站 - 一个设计人用来记录工作,记录生活
  32. Jaybird’s Blog - 53 CSS-Techniques You Couldn’t Live Without
  33. 53 CSS-Techniques You Couldn’t Live Without | Evolution : weblog
  34. CSS Float Theory: Things You Should Know | Evolution : weblog
  35. CSS Way » 53 CSS-Techniques You Couldn’t Live Without
  36. webmajstor.org
  37. 53 CSS-Techniques You Couldn’t Live Without | Fusuy.com || Webmaster Accessary Platform
  38. 53 técnicas CSS imprescindibles | CSSBlog ES
  39. 53 Advanced CSS Techniques | Standalone Complex
  40. Ethos Blog » CSS Unleashed
  41. VietNam PHP Blog » Blog Archive » 53 kỹ thuật CSS ko thể bỏ qua
  42. Takip Etmeye Değer Siteler (css) | Türkiyenin e-cayip web oluşumu
  43. 我想网 » Blog Archive » 101个CSS技术高级应用教程(上)
  44. 克兰印象 » 53种网页设计师必备的高级CSS技巧
  45. CSS web design techniques to die for | Web Templates, SEO, Web Design Tutorials, Tips, Guides - DT Blog
  46. 53 CSS-Techniques | Themeflash
  47. Dellemente Net-Magazine » Blog Archive » 53 CSS -Techniques You Couldn’t Live Without
  48. 53 CSS-Techniques You Couldn’t Live Without « Ramesh
  49. 53 CSS-Techniques You Couldn’t Live Without | Rystereology
  50. 53种网页设计师必备的高级CSS技巧 | 帕兰映像
  51. Top CSS Techniques | psd2css
  52. Whoila Blog » Blog Archive » CSS Floating Image Left No Text Wrap
  53. CSS Float Theory: Things You Should Know | WEBDESIGN FAN
  54. 53 CSS Techniques You Couldn't Live Without | The PhenixbluE
  55. 99 Graphic Design Resources- A place for desginers |
  56. Usefull CSS Techniques For Designers | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money
  57. Best CSS |
  58. 53 CSS-Techniques You Couldn’t Live Without | Theme Center
  59. 53种网页设计师必备的高级CSS技巧 | Web启点
  60. 53 técnicas esenciales de estilos CSS | Cosas sencillas
  61. Some CSS techniques and Tips which you always need. | 99Points
  62. 53个你离不开的CSS技巧 | narco
  63. 101 CSS Techniques Of All Time- Part 1 « WORLD OF RADZAD
  64. web前端:53种网页设计师必备的高级CSS技巧 | 蓝枫's BLOG

Leave a Comment:

HTML allowed: <a href=""> <strong> <em> <code>

Powered by WordPress using the Minimal, Really Theme. Inspired by Things