Wrapping text around an image may seem simple at first glance.
Align the image left or right and apply the text.
But to get the image exactly where you want it is not as simple as it seems.
You want the image to end up at the bottom right with the text flowing around it.
That is fairly simple unless the text is changed often.
There is also the problem with the way different browsers display the text and the image.
Lets take an example:
We will use the code you posted.
The only thing is, you didn't specify the width of the outer div.
So I will give it a width of 300px just for this example.
Now if we specify the image div first and then the text,
the text will wrap itself around the div with the div being at the top of the page, aligned either left or right (float:left or float:right).
Now this is important to understand, because we want the image div to be at the bottom right.
So you need to know how much text will be able to occupy the space to the left of the image div without wrapping itself around the bottom of the image.
This text goes after the image div and the rest of the text goes before the image div.
HTML Code:
<div id="verhaal" style="width:300px;text-align:justify;">
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
<div style="width:100px;height:100px;float:right;margin-top:5px;margin-left:5px;"><img src="" width="100px" height="100px"></div>
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.
</div>
Linear Mode
