[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1914
  • Last Modified:

Floated image surrounded by text

Can someone tell me the css code to wrap a floated image in text?  I want the text of a paragraph to appear both above, beside, and below the image.  I've included a picture of what I would like to do.  Right now, I only know:

<div style="float: right"><img ... />
<p>text...</p>

This has the text beside and below the image but not above.

Many thanks,
George
example-small.jpg
0
GeorgeClapp
Asked:
GeorgeClapp
  • 3
  • 2
1 Solution
 
JorisWCommented:
You have to place the image inside the text to accomplish that. For example:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat quam, fermentum eget, laoreet at, posuere et, nulla. Phasellus in enim vel purus egestas pharetra. 
<img src="example.png" style="float: right;"/>
Proin nulla magna, dictum et, pulvinar ac, egestas eget, odio. Pellentesque odio sem, faucibus sed, interdum fermentum, facilisis in, eros. Maecenas ornare tristique sapien. Quisque aliquam tristique erat. Vivamus cursus elit ac lorem scelerisque aliquet. Duis sit amet nulla non quam adipiscing consectetuer. Duis felis massa, fringilla ac, faucibus eu, blandit eu, arcu.
</p> 
<p>Quisque quis urna in purus malesuada gravida. Aenean ac nibh quis leo imperdiet scelerisque. Duis semper enim quis odio. Donec accumsan massa eget enim. Quisque sit amet tellus. Donec feugiat augue eu enim. Vestibulum quam elit, semper a, tempus placerat, auctor at, lectus. Mauris id est ut orci venenatis facilisis.</p>

Open in new window

0
 
GeorgeClappAuthor Commented:
It works!  I didn't know that was how "float" works.  However, where the text breaks depends on where you place the floated image in the text.  What if the font size changes or the width of page (or column) changes?  You'd have a dangling line of text.
0
 
JorisWCommented:
Not much you can do about that besides using a fixed width/limited width layout
0
 
GeorgeClappAuthor Commented:
I've found a couple other approaches.  One is "stacked floats" with different widths, and each float is cleared so it is placed below rather than beside the previous float.  The problem with that in my site is that I have a three column layout, and the clear brings the float to the bottom of the lowest column, not the previous float.
The other approach is to place an empty div with an appropriate height above the floated image.  The empty div has the width of the container, so the floated image is placed below it.  I then insert the <p> with a negative margin so the text flows above the image.  It works in Firefox, but it doesn't work in IE7.
Any suggestions?
Many thanks,
George
0
 
JorisWCommented:
Ah nice, didn't think of that.

Anyways you can solve the first problem by using "overflow: hidden" on the middle container (where the floated image is in). This works because the container now has a new "block formatting context", float and clears from different block formatting contexts have no effect on each other.

For internet explorer 6 and below you also need to make sure the middle container "hasLayout" (some straing MS feature), in other words if the middle container does not have position absolute, float, width, height or zoom you will have to add "zoom: 1;"
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now