Wrapping text in a div

[chigley]

I have googled this to death and got nowhere. It seems like such a common problem, and lots of advice but nothing works for me.

Here is what I am trying to do.

Two divs (inline)

<div 1>---------------<div2>
Some long *
text that nicely * An image
wraps inside its *
nested div *

I have tried using word-wrap: break-word in the style of the div but this does not work. I have tried using pre tags (which sort of works but the text overlaps the rhs of the boundary by a few characters.

Currently have

<div id="outer">
<div style='border:1px solid black; float:left;width=50;display:inline; word-wrap: break-word;'>This is some random waffle text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. AAAAaaaaaaaaaaaaaa bbbbbb ccccccccccccccccccccccccccccccccccccccccc
sdddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<div style='border:1px solid black; float:left;'>This is where I want my image
</div>
</div>

Charlie Benger-Stevenson
Hart Hill IT Ltd

http://www.harthill-it.co.uk

 

[Vragabond]

width=50 is erroneous css. It should read, width: 50px;. With that, standards based browsers will respect the 50px width.

The other thing of course is, why do you need such weird text on the website?

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[vacunita]

Also your weird text may pose a problem, as browsers won't just break up a "word" to fit in a space limitation. So your text: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" or "sdddddddddddddddddddddddddddddddddddddddddddddddddddddd" May just spill out of the div instead of getting broken up into a new line, because they are considered as a singe "word".

Try something with natural breaks in it, such as the industry standard Lorem Ipsum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum

This helps you fake text so you know how it will behave.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.