...

View Full Version : wrapping text around a div



ryanw007
12-07-2006, 01:01 AM
Hello

I am trying to wrap text around a div the top of a div



**I can easily get the text to wrap around the bottom of a div like:
http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm

something like below where the image would be a div container
http://earth4win.magma.ca/ryanw/2222/wrap.cfm


In the example above the text is hard coded but the text I am using is dynamic and I do not want to be forced to do a character count and break up my text into segments


Any help on this would be appreciated

harbingerOTV
12-07-2006, 01:12 AM
Im assuming this is in a blog. can you not just write the image tag in the post as you write it?

ryanw007
12-07-2006, 04:14 PM
this is not for a blog and this is not for a image

basically I just want text to wrap around the top of another div. Inside the other div there will be text

Here is a illustration of what I am trying to achieve

http://earth4win.magma.ca/test.bmp

_Aerospace_Eng_
12-07-2006, 04:28 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#test {
width:400px;
margin:auto;
}
#box {
border:5px solid #F00;
padding:5px;
width:200px;
float:right;
}
</style>
</head>
<body>
<div id="test">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempus. Maecenas faucibus. Cras fermentum pede quis eros. Phasellus posuere lectus et nulla. Sed ultricies nunc quis justo. Duis lacus justo, lacinia non, aliquet sit amet, viverra vel, leo. Phasellus neque massa, consectetuer at, rutrum in, mattis vitae, enim. Phasellus in ligula sit amet nisl tincidunt hendrerit. Nullam tincidunt tellus eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed luctus ultricies ligula. Praesent et erat. Sed elit turpis, venenatis non, dignissim ac, gravida non, ligula. </p>
<p> Ut at purus a lorem fringilla sodales. Proin rutrum tincidunt elit. Proin purus. Fusce turpis. In ac felis ac odio mattis laoreet. Aliquam quam nisi, interdum a, dictum eu, vehicula eget, tortor. Nunc quis diam. Phasellus sed nisl. Pellentesque mollis. Fusce hendrerit, massa nec mattis rutrum, massa augue congue sem, quis luctus eros purus sit amet ligula. Aliquam in neque cursus elit scelerisque rutrum. Morbi nonummy molestie mi. Praesent vulputate. Mauris sed ipsum at arcu bibendum porttitor. Suspendisse lorem turpis, rutrum eu, volutpat accumsan, lobortis at, lectus. </p>
<div id="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce mauris. Morbi pretium tortor at neque. Praesent tempor nulla in nisl. Nulla quis augue.Nam aliquet urna ut nisi. Cras nibh lectus, volutpat ut, consectetuer ut, imperdiet non, nulla. Nulla dolor. Pellentesque mi. Nulla et dui. Maecenas placerat pede. Maecenas mauris diam, gravida sit amet, congue quis, dapibus tristique, nibh.</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tempus. Maecenas faucibus. Cras fermentum pede quis eros. Phasellus posuere lectus et nulla. Sed ultricies nunc quis justo. Duis lacus justo, lacinia non, aliquet sit amet, viverra vel, leo. Phasellus neque massa, consectetuer at, rutrum in, mattis vitae, enim. Phasellus in ligula sit amet nisl tincidunt hendrerit. Nullam tincidunt tellus eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed luctus ultricies ligula. Praesent et erat. Sed elit turpis, venenatis non, dignissim ac, gravida non, ligula. </p>
<p> Ut at purus a lorem fringilla sodales. Proin rutrum tincidunt elit. Proin purus. Fusce turpis. In ac felis ac odio mattis laoreet. Aliquam quam nisi, interdum a, dictum eu, vehicula eget, tortor. Nunc quis diam. Phasellus sed nisl. Pellentesque mollis. Fusce hendrerit, massa nec mattis rutrum, massa augue congue sem, quis luctus eros purus sit amet ligula. Aliquam in neque cursus elit scelerisque rutrum. Morbi nonummy molestie mi. Praesent vulputate. Mauris sed ipsum at arcu bibendum porttitor. Suspendisse lorem turpis, rutrum eu, volutpat accumsan, lobortis at, lectus. </p>
</div>
</body>
</html>

ryanw007
12-07-2006, 05:02 PM
thanks for your reply

from my first post I already know how to do this ie:
http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm


I am wanting the text to wrap above the div and not below the div
ie: the picture below
http://earth4win.magma.ca/test.bmp


Additionally the text is dynamic and cannot be pre-fixed

_Aerospace_Eng_
12-07-2006, 05:13 PM
I'm not sure what to tell you then. CSS can only style html. It can't tell it where to wrap and what not. As long as the box is floated text will wrap around it. I gave you an example of what it looks like. Up to you to figure out to get it that way.

ryanw007
12-07-2006, 06:52 PM
thanks for trying to help, but again I already know how to do what you have shown me as I have coded this many times before. My question is to try and find a way to "WRAP TEXT AROUND THE TOP OF A DIV".

http://earth4win.magma.ca/test.bmp

The reason I mentioned it was dynmaic text is because if it was static text I could simply hard code the text and then break my text when I wanted to and then insert the div. Like here for instance <div style="float:right:></div>
then continue with my sentence.

Being that my text is dynamic the only way I know to wrap text around the top of the div would be to cut off my string variable at some predermined white space gap.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum