Picture wrapping in CSS

Ok, I have to admit I'm not sure if this is possible - I haven't played with CSS much but I'd imagine it must be...


I want to have a picture in my document and have the text wrap around it. (ie more than one line of text next to picture)

My first solution would be to use a table, however, if the user has a different browser are size to me then there will either be too much text next to the picture or too little, giving the wrong look. I'm after something like...


Heading

Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
|||||||||||||||||||||||| Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.
Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.

Ideally, I would also like the text fully justified

I'm sure Word could export something that does this as "HTML" but tbh I don't want 8,000 lines of code just for this one thing :-)

Thanks in advance
LVL 5
basiclifeAsked:
Who is Participating?
 
PeterCNConnect With a Mentor Commented:
float (css) does that :-)  And perhaps you might want to use a classname for floating images, so that other images don't unneccessarily start to float:

<img src="someimage.jpg" class="picture">
<p>
     Lots of text....
</p>

css:

img.picture {
   float:left;
}
0
 
PeterCNCommented:
and to justify the text use:

p {
    text-align:justify;
}
0
 
basiclifeAuthor Commented:
Stuning. Give me 10 minutes to play. I'm guessing I can use right and center as well (although not sure why I'd want center :-D)
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
basiclifeAuthor Commented:
I have played and it works. One more question, if you don't mind:

Is it possible to have a non-rectangular "float" ie a transparent gif with the text wrapped to it? I have some circular images and of the text could follow the curve it'd look a lot nicer than a straight line. I understand that this would be technically wrapping around AND writing over so I'm guessing it's not possible. If you know, however, I'd appreciate it.

Please excuse typing. It's 09:30 and I haven't slept yet - No sleep and Caffeine makes for great creativity but bad typing
0
 
PeterCNCommented:
Floating around curves or slants is possible, but tricky. Everything in html is basically a rectangular shape, so curves don't really exist, but you could layer a few floating elements and visually fake a curve. There are a few demo's of this on Meyerweb:

slantastic
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

curvelicious
http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

pyramidal
http://www.meyerweb.com/eric/css/edge/slantastic/demo2.html

enjoy :-)
0
 
PeterCNCommented:
and try to get some sleep if you can :-)
0
 
seanpowellCommented:
Very funny Peter ...

If you're talking about text wrapping around a curve, I can't think of a better example :-)
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm
0
 
basiclifeAuthor Commented:
Cheers all. Much appreciated.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.