Text wrapping problem 1

[tviman]

Okay, I must be wigging out.... I can't get my head around this one: I've got a situation where there are 2 images side by side, with text flowing around one of them - but I can't get the text to flow. Here's a crude example:

+--------------------------+ +---------------+
| | | |
| image 1 | | image 2 |
+--------------------------+ | |
| |
text text text | |
text text text | |
text text text +---------------+
text text text text
text text text text
text text text text

The images and text are in seperate divs positioned absolute, but I've tried relative positioning and floating the text and images both left and right and it's just not working. Can some point me in the right direction?

Many thanks!

Patrick

There's always a better way. The fun is trying to find it!

 

[LFI]

Can you give us an HTML sample to start from?

--Dave

 

[tviman]

This is where I stopped - out of frustration...

<div style="position: absolute; left:10px; top:50px; width:433px; height:126px;"><img src="images/place_name1.jpg" width="433" height="126" border="0"></div><div style="position: absolute; left:10px; top:176px; font-family: arial,helvetica,verdana,san-serif; color: #000000; font-size:14px; float: left">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text<div style="position: absolute; left:485px; top:50px; width:266px; height:310px; float: left"><img src="images/place_chicken1.jpg" width="266" height="310" border="0" align="right">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</div></div>

There's always a better way.  The fun is trying to find it!

 

[ChrisHunt]

Is this the sort of thing you're after?

<img src="images/place_chicken1.jpg" width="266" height="310" border="0" style="float:right">
<img src="images/place_name1.jpg" width="433" height="126" border="0">
<p>
text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text
</p>

You might want to put the whole thing inside a fixed-width <div> to prevent the layout breaking when it's too narrow to show the images side-by-side

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[tviman]

Chris... THAT'S IT EXACTLY!!!

Thank you soooooo much!!! I guess I was more concerned with getting everything set up in sepeate divs to think about setting a style for the images. Somethng about forests and trees comes to mind.

Again, thank you!

There's always a better way. The fun is trying to find it!