I am trying to position four images in a 2x2 formation on the right of a
page, and have paragraph text on their left and then flowing below the
images. In the first example the images are just contained in a
right-floated DIV. The text flow is OK, but the image placing is wrong.
http://www.webadit.co.uk/test/templates/noabsposn.html
So far so good, but when the images are absolutely positioned in the DIV
(giving the required 2x2 grid) the text flow breaks down.
http://www.webadit.co.uk/test/templates/withabsposn.html
(or follow link in the example).
I notice that if the DIV is given an explicit WIDTH the first line of
the text 'wraps' as required, but the second line continues beneath the
images. (The images are positioned 20px below the top of the DIV)
Setting a width on the P text works, with the amount of text I've got in
the examples, but I'd need a 'p.narrow' followed by a 'p.wide' to
achieve the flow beneath the images, and it would be inflexible if the
text grew longer or shorter.
Alternatively setting a border AND an explicit width on the DIV, AND
'overflow: hidden' on the text achieves what feels like a better result,
but it still fails to flow under the images.
http://www.webadit.co.uk/test/templates/partialsolution.html
Since absolute positioning is causing the problem another solution is to
avoid it by having a single composite image and float it right (and put
it first in the code). However, that introduces inflexibility in the
image selection.
Is there any other way I can achieve both objectives, preferably without
resorting to absolutely positioning everything ?
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
