basiclife
asked on
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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)
ASKER
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
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
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 :-)
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 :-)
and try to get some sleep if you can :-)
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
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
ASKER
Cheers all. Much appreciated.
p {
text-align:justify;
}