Wrap paragraphs around image

HTML & CSS
1

I’m trying to get 2 paragraphs to wrap around one image, but I can only get one of them to wrap

the html code is
<div>
<p>First paragraph</p>
<div>Image
<p>Image caption</p>
</div>
<p>Second paragraph</p>

thanks for any suggestions

2

Do you have any css code behind that? If not I think giving the text a float: left; property might fix your problem.

3

Hi paul,

your problem is interesting and it is not easy. The reason it’s not easy is because if I were to try to duplicate that, I’d have to insert the image after “vestibulum erat” and then float it right to get the rest of the text to wrap at the correct spot. And that’s a brittle way of doing it, since anyone having a slightly larger or smaller font size means the wrapping won’t look right.

Hmm… I’m almost thinking this is something someone would do in one of the CSS quizzes. You’re trying to imitate print, and this is something CSS sometimes gets really clunky with.

4

thanks for your quick answers!

I tried floating the text but it doesn’t help.
I’m going to look into the new CSS3 layouts, maybe that will help

5

No, don’t float the text, float the image.

There might be something for this specifically in CSS3 (I’m thinking about how they’ve started implementing “columns” in the way a newspaper does) but even if there is something, it may only be implemented in a single browser. CSS3 is coming out in “modules” and even after that, you’ve got to wait for browser support… unless you’re writing for a single browser (like an iPhone app or an intranet).

6

Actually I just found out how to do it!
I found this article:http://www.alistapart.com/articles/crosscolumn/
so I put the image inside a span, in the middle of the first paragraph with a negative margin and I get the desired result.

7

This currently isn’t possible what you are trying to achieve, unless you do something like slantastic (Eric meyers site for details) :slight_smile:

CSS3 doesn’t have something for this (even if there is some module I haven’t heard about, support would be miniscule :))

8

There is this if it’s any help… http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

9

I was about to post that sandbag technique but i can’t understand it myself lol. Never got it to work…
:blush:

10

It’s OK, the technique I found at A list apart works for me.

Hey I’m also from Belgium living in Brazil!

11

Paul, the ALA technique is tricksy. I like it, but… :slight_smile:

12

PM’d you :smiley:

13

Hi,
I do remember reading that article some time ago. That technique does produce a nice result when used along with two floated columns as they show in Example 4.

However, if you are just wanting two separate paragraphs to wrap around the image in a single column setup then I see no reason why a Single Sandbag Float would not work for you.

As you can see it has no problem stopping one paragraph midway down the float and starting the next one. If the height of the sandbag float was to be set in ems then the floated image would stay proportionally positioned with the text. :slight_smile:

14

Ray, any chance to let that demo online a few days? I’d like to study it because i never could get that sandbag technique to work properly…

15

That one has been there a long time Luki. I have some more in a “Sandbag” section of my demos. (link in sig)

Here is one I just put together that uses all ems for sizing and two paragraphs of equal text amounts. (probably would not happen in a real world case)

It seems to hold together very well with “zoom” and “zoom text only” (FF)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scaling Sandbag Float</title>

<style type="text/css">
body {
    background: #fff;
    font-size:100%;
    margin:0;
    padding:0;
}
#wrapper {
    width:26em;
    margin:1em auto;
    padding-top:.6em;
    overflow:hidden;
    background:#EEF;
    border:1px solid #000;
}
#sandbag{
    float:right;
    width:5px;
    height:7em;
    background:red;
}
#image{
    float:right;
    clear:right;
    width:10em;
    height:5em;/*10em total*/
    border-top:5em solid #000;
    margin:.5em .6em 0;
    background:#333;
}
p{
    margin:0 .6em .5em;
    text-align:justify;
}
h1{
    font-size:1.6em;
    padding-top:.2em;
    text-align:center;
}
</style>
</head>
<body>
<h1>Scaling Sandbag Float</h1>
<div id="wrapper">
    <div id="sandbag"></div>
    <div id="image"></div>
    <p>Lorem ipsum dolor sit amet consectetuer justo nec ut ac enim. Auctor dictumst quis egestas ut 
    cursus mauris augue fringilla orci pede. Vel a est at semper sed natoque eleifend id convallis Donec. 
    Augue ut congue ac tellus dignissim Ut pretium Nullam sed Nunc. Nec elit dui Nullam parturient In ut 
    elit Curabitur id at. Vestibulum Cum id Donec sagittis pede tristique non ipsum Sed et. Vestibulum 
    Cum id Donec sagittis pede tristique non ipsum Sed et.</p>
    <p>Lorem ipsum dolor sit amet consectetuer justo nec ut ac enim. Auctor dictumst quis egestas ut 
    cursus mauris augue fringilla orci pede. Vel a est at semper sed natoque eleifend id convallis Donec. 
    Augue ut congue ac tellus dignissim Ut pretium Nullam sed Nunc. Nec elit dui Nullam parturient In ut 
    elit Curabitur id at. Vestibulum Cum id Donec sagittis pede tristique non ipsum Sed et. Vestibulum 
    Cum id Donec sagittis pede tristique non ipsum Sed et.</p>
</div>

</body>
</html>
16

Great, already checking it out :slight_smile:

17

Ray, the Examiner uses something like your “sandbag float” technique in the template for its stories. The difference is, their code is horrendous. :slight_smile:

18

thanks Rayzur, I’ll be sure to check that out.

thanks to everyone who contributed!

19
Off Topic:

Paul, did you check your PM?