Posted by Jonathan N. Little on 06/02/06 13:10

dorayme wrote:
> In article <2ce6d$447faca9$40cba7cf$19712@NAXS.COM>,
> "Jonathan N. Little" <lws4art@centralva.net> wrote:
>
>> dorayme wrote:
>>> In article <97119$447f8ece$40cba7cf$9169@NAXS.COM>,
>>> "Jonathan N. Little" <lws4art@centralva.net> wrote:
>>>
> ...
>>> With some assumptions about referencing your classes in the html
>>> (not in your snippet), the text wraps under the pic, is this what
>>> is wanted? And the 1em had no effect in Safari?
>
>> Nope, should have been:
>>

Yea, you are correct that my example is missing the required class name,
but no your example will not keep the text with the picture if a second
image is follow the first.


> You sure you don't mean "Oh yeah, should have been...?
>
>> <div class="pixbox">
>> <img src="yourpix.jpg" alt="the pix">
>> write stuff about your picture here...
>> </div>
>>
>

By wrapping the text and the image in a containing DIV then regardless
if you have a small or large amount of associated text it will stay
together with the image when the image is floated.

But your code:

..pic {float:left;width:500px}
..picText {margin-left: 510px;}

<img class="pic" src="pics/northCoastCountryScene.jpg" alt="the
pix">
<div class="picText">write stuff about your picture here...</div>

If you follow with a second image and the view port is too small to
accommodate the second image to the right of the first it will push to
the left margin under the first image. That is ok, but the second
image's text will jump up along side the first image and not stay along
side the second image that the OP wants.

The secret of getting the containing DIV to expand and wholly contain a
floated img is the "overflow: auto;". Amazing it even works in IE6.

> Exactly what I had in looking at your idea. It looked
> sophisticated so I wanted to see if it had any advantage over my
> more simple minded suggestion. But what about the business of the
> text wrapping under the pic in your mark-up, is that what OP
> wanted?
>

No it wasn't, but does do it if you correct the markup as I showed to
have the class applied to the DIV.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]