Text wrap inside paragraph

Text wrap inside paragraph (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

thatguy -> Text wrap inside paragraph (6/14/2006 9:25:19)
I want my text to wrap around a div continously inside a paragraph. If I put the div before the paragraph all the text is below it and vice versa. If I stick the div in the middle of the <p> tag about where I want the text to break around, it will break the line right at that point and start the text right next to the image. I understand why it behaves like it does with the things I am trying but I don't know how to get it to do what I want. I know I could do a fixed width and just place the image at the correct line break but I am trying to have the text flow all the way across on any viewport. So is there a way to get text to flow around an image below the text without starting a new paragraph right next to the image?

rdouglass -> RE: Text wrap inside paragraph (6/14/2006 9:56:09)
Can you float it?

Tailslide -> RE: Text wrap inside paragraph (6/14/2006 10:02:23)

Are you actually trying to place an image or a whole div within the paragraph?

Either way your solution's floating the image or div.

If you try floating a div within a paragraph it won't validate though (not too sure why as they're both block level elements). If it's an image then you've got no problems- just float it right and give it some margins or padding to hold the text away a bit and you're fine.

To float a div I'd put it just before the paragraph and float it. That way it will sit over on the right hand side level with the top of the paragraph and the paragraph text will flow down around it.

Image version with inline CSS just for here - obviously move the CSS to an external stylesheet though!

<p><img src="images/yourimage.jpg" height="100" width="100" alt="your image" style="float:right; margin:5px 0 5px 5px;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.</p>

Div version:

<div style="float:right; margin:5px 0 5px 5px;width:100px; height:100px;">Hello, this div is floating!</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.</p>

Edit: doh - Roger got in before me!

thatguy -> RE: Text wrap inside paragraph (6/14/2006 11:21:45)
I don't think I explained it correctly. I know about float but in your examples the text begins next to the image or div. What I want is if I have a long paragraph and I want it to wrap around something that is displayed mid way through that single paragraph. How can it wrap around so that the line before the div breaks all the way at the end regardless of the resolution of the display. So say the first two lines of a paragraph display edge to edge in the browser. Then the next two lines would display from the div to the right edge. Then if you resize your browser to be smaller, perhaps three lines are above the div going edge to edge and three lines are div to edge since there is less room to stretch out. Sort of like how the text can automatically flow once you are below the floated item, only I want that to start above the item. Edit: I guess I am talking strictly about a div because I tested with an image and it does what I am talking about. I may be able to work around this but is there any way with a div?

Tailslide -> RE: Text wrap inside paragraph (6/14/2006 11:35:18)
A div within a paragraph won't validate. You can have a div between paragraphs but not inside one. If it's for an image - just float the image without the div.

thatguy -> RE: Text wrap inside paragraph (6/14/2006 11:41:29)
That was my problem I was doing it with the div. I was using a div only because I made the div backgroud the same as the picture and then I could just write things below it to make it look like it is in the picture itself. I guess I will actually put it in the image. Sometimes I don't care if it validates as long as it works. It seems like it might be useful to display a div inside a paragraph sometimes but I'll just work around it.

c1sissy -> RE: Text wrap inside paragraph (6/15/2006 9:25:23)
I"m not really sure you can do this. I suppose you could change the div display to inline, but I don't think that would work either. Do you have a page link? this way the page could be played with by others to see if they can get it to do what you wish?

Page: [1]

0.0625