By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,057 Members | 1,401 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,057 IT Pros & Developers. It's quick & easy.

Arranging text to float alongside an image

P: n/a
I'm trying to get some text to lie to the right of an image. If the text is
deeper than the image I want the text to continue with its left margin
following the line projected down from the right of the image, not to flow
underneath the image as with a float:left. I've achieved this with a table
at http://alphaworks.co.uk/imagetest/test.html (top and middle image / text
pairs) where I've also attempted to achieve it with CSS (bottom image / text
pair) but failed miserably. As the content is dynamically generated I'd
rather not need to know the width of the image at the CSS level. Can
somebody point me in the right direction please?

Many thanks,
Geoff

--
Remove nospam in email address to reply
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
"Geoff Soper" <ne*********@alphaworks.co.uk> wrote in
news:40**********************@news.dial.pipex.com:
I'm trying to get some text to lie to the right of an image. If the
text is deeper than the image I want the text to continue with its
left margin following the line projected down from the right of the
image, not to flow underneath the image as with a float:left. I've
achieved this with a table at
http://alphaworks.co.uk/imagetest/test.html (top and middle image /
text pairs) where I've also attempted to achieve it with CSS (bottom
image / text pair) but failed miserably. As the content is dynamically
generated I'd rather not need to know the width of the image at the
CSS level. Can somebody point me in the right direction please?


Well if you *do* know the width of the image, you can simply set the left
margin for whatever element contains the text to the width of the image
plus whatever however much space you want to leave on the side. And since
you're generating your content dynamically, you've got one of the fairly
rare situations where using an inline style attribute is actually sensible.
Put everything but the left margin for the text in question into your
external style sheet, and then have the content generation process fill in
a "style='margin-left: xxpx;'" attribute on the text container based on the
actual width of the image.
Jul 20 '05 #2

P: n/a
"Eric Bohlman" <eb******@earthlink.net> wrote in message
news:Xn*******************************@130.133.1.4 ...
"Geoff Soper" <ne*********@alphaworks.co.uk> wrote in
news:40**********************@news.dial.pipex.com:
I'm trying to get some text to lie to the right of an image. If the
text is deeper than the image I want the text to continue with its
left margin following the line projected down from the right of the
image, not to flow underneath the image as with a float:left. I've
achieved this with a table at
http://alphaworks.co.uk/imagetest/test.html (top and middle image /
text pairs) where I've also attempted to achieve it with CSS (bottom
image / text pair) but failed miserably. As the content is dynamically
generated I'd rather not need to know the width of the image at the
CSS level. Can somebody point me in the right direction please?
Well if you *do* know the width of the image, you can simply set the left
margin for whatever element contains the text to the width of the image
plus whatever however much space you want to leave on the side. And since
you're generating your content dynamically, you've got one of the fairly
rare situations where using an inline style attribute is actually

sensible. Put everything but the left margin for the text in question into your
external style sheet, and then have the content generation process fill in
a "style='margin-left: xxpx;'" attribute on the text container based on the actual width of the image.


That's true, I also had a suggestion of floating the image and text which
achieved much the same. Either way the next container after this image/text
pair needs to have clear:left set so as to be placed against the left margin
and not possible slotted underneath the text when the image is deeper than
the text. See this at http://alphaworks.co.uk/imagetest/sol.html

Thanks,
Geoff
Jul 20 '05 #3

P: n/a
Geoff Soper wrote:
I'm trying to get some text to lie to the right of an image. If the text is
deeper than the image I want the text to continue with its left margin
following the line projected down from the right of the image, not to flow
underneath the image as with a float:left. I've achieved this with a table
at http://alphaworks.co.uk/imagetest/test.html (top and middle image / text
pairs) where I've also attempted to achieve it with CSS (bottom image / text
pair) but failed miserably. As the content is dynamically generated I'd
rather not need to know the width of the image at the CSS level. Can
somebody point me in the right direction please?


A CSS table is the correct way to do this (not supported by IE).

--
Spartanicus
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.