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?

111 Responses to “Image floats, without the text wrap!”

  1. […] 38. Resmin yerini CSS ile ayarla […]

  2. Richard says:

    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!

  3. […] ????????? ??????????? ??? ????????? ??????? […]

  4. […] 38. Image Floats without the Text Wrap […]

  5. […] Image floats, without the text wrap! – ghettocooler.net […]

  6. […] Imagenes flotantes sin el ajuste de texto […]

  7. […] 38. Image Floats without the Text Wrap //???????????? […]

  8. […] Image floats, without the text wrap! […]

  9. Wayne says:

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

  10. […] CSS Image Text Wrap […]

  11. Auris says:

    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?

  12. […] Image Floats with the text wrap – How many times do you have an image floated left in a block of content, but want to keep that […]

  13. […] 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? […]

  14. Great Job.

    This was very smart and useful.

  15. […] 38. Image Floats without the Text Wrap […]

  16. Jon Williams says:

    Nice writeup. Reading this was helpful. Thanks.

  17. Honour Chick says:

    very useful info… thanks

  18. […] CSS Image Text Wrap […]

  19. […] 38. Image Floats without the Text Wrap […]

  20. […] 38. Image Floats without the Text Wrap […]

  21. […] 38. Image Floats without the Text Wrap […]

  22. a wonderful css using to solve wrap problems

  23. […] 38. Image Floats without the Text Wrap […]

  24. […] 38. Image Floats without the Text Wrap […]

  25. […] 38. Image Floats without the Text Wrap […]

  26. […] 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? […]

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

Leave a Reply