wrap paragraphs around image

**paul_sideradesig** · Feb 12, 2010 14:56

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

**sparq** · Feb 12, 2010 15:00

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

**Stomme poes** · Feb 12, 2010 15:13

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.

**paul_sideradesig** · Feb 12, 2010 15:35

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

**Stomme poes** · Feb 12, 2010 15:44

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

**paul_sideradesig** · Feb 12, 2010 16:38

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.

**Rayzur** · Feb 12, 2010 19:58

Originally Posted by paul_sideradesig

Actually I just found out how to do it!
I found this article:http://www.alistapart.com/articles/crosscolumn/

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.

**Luki_be** · Feb 12, 2010 20:10

Originally Posted by Rayzur

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.

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...

**Rayzur** · Feb 12, 2010 20:55

Originally Posted by Luki_be

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...

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

Originally Posted by Rayzur

If the height of the sandbag float was to be set in ems then the floated image would stay proportionally positioned with the text.

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)

Code HTML4Strict:

<!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>

**RyanReese** · Feb 12, 2010 16:44

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

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

)

**PicnicTutorials** · Feb 12, 2010 16:46

There is this if it's any help... http://www.bigbaer.com/css_tutorials....text.wrap.htm

**Luki_be** · Feb 12, 2010 17:01

Originally Posted by EricWatson

There is this if it's any help... http://www.bigbaer.com/css_tutorials....text.wrap.htm

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

**paul_sideradesig** · Feb 12, 2010 17:14

Originally Posted by Luki_be

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

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

Hey I'm also from Belgium living in Brazil!

**Luki_be** · Feb 12, 2010 19:51

Originally Posted by paul_sideradesig

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

Hey I'm also from Belgium living in Brazil!

PM'd you

**Black Max** · Feb 12, 2010 18:30

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

**Luki_be** · Feb 12, 2010 21:16

Great, already checking it out

**Black Max** · Feb 12, 2010 23:42

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

**paul_sideradesig** · Feb 13, 2010 06:53

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

thanks to everyone who contributed!

**Luki_be** · Feb 13, 2010 07:10

Off Topic:

Paul, did you check your PM?

User Tag List

Thread: wrap paragraphs around image

Thread Tools

Display

Hybrid View

wrap paragraphs around image

Bookmarks

Bookmarks

Posting Permissions