Image and Text Side By Side
in [CSS]
|
Prev: CSS and plain text
Next: div a:hover IE 6.0
From: shapper on 27 Sep 2006 11:44 Hello, What is the best way to place an image and a text side by side using CSS? Basicaly what I am trying to do is to make the image and the text to appear as follows: Image My Text... XXXXX --------------- XXXXX --------------- --------------- --------------- Do you understand? Like to table columns. However, I was looking to do this without a table. Thanks, Miguel
From: Ben C on 27 Sep 2006 11:50 On 2006-09-27, shapper <mdmoura(a)gmail.com> wrote: > Hello, > > What is the best way to place an image and a text side by side using > CSS? > > Basicaly what I am trying to do is to make the image and the text to > appear as follows: > > Image My Text... > XXXXX --------------- > XXXXX --------------- > --------------- > --------------- > > Do you understand? > Like to table columns. > > However, I was looking to do this without a table. Put the text in a <div> or something, and make both the image and div float: left. Put the <img> immediately before the <div> in the source: <img src="blah.png" style="float: left"></img> <div style="float: left"> My Text... --------------- --------------- --------------- --------------- </div>
From: axlq on 27 Sep 2006 11:59 In article <slrnehl7ck.qh9.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: >On 2006-09-27, shapper <mdmoura(a)gmail.com> wrote: >> What is the best way to place an image and a text side by side using >> CSS? >>... >> Like to table columns. >> However, I was looking to do this without a table. > >Put the text in a <div> or something, and make both the image and div >float: left. Put the <img> immediately before the <div> in the source: Won't that cause the text to flow around the image underneath, if the text is long enough? If the OP actually wants columns, then I have found that the best, most reliable, most browser-compatible way to make columns is to use side-by-side table cells. Fighting with CSS to make columns work correctly on all browsers was a nonproductive use of my time. -A
From: Ben C on 27 Sep 2006 12:23 On 2006-09-27, axlq <axlq(a)spamcop.net> wrote: > In article <slrnehl7ck.qh9.spamspam(a)bowser.marioworld>, > Ben C <spamspam(a)spam.eggs> wrote: >>On 2006-09-27, shapper <mdmoura(a)gmail.com> wrote: >>> What is the best way to place an image and a text side by side using >>> CSS? >>>... >>> Like to table columns. >>> However, I was looking to do this without a table. >> >>Put the text in a <div> or something, and make both the image and div >>float: left. Put the <img> immediately before the <div> in the source: > > Won't that cause the text to flow around the image underneath, if the > text is long enough? No, because the text is in a floating box of its own. They both float around any other inline stuff that might be in the containing box, in this case nothing. > If the OP actually wants columns, then I have found that the best, > most reliable, most browser-compatible way to make columns is to use > side-by-side table cells. [...] You're probably right.
From: matthom@gmail.com on 28 Sep 2006 09:01
The image should get floated left, and the text needs a margin-left set to the size of the image, plus about 15 extra pixels. Tables should always be used for tabular data only - not for presentation or layout purposes. Let's say the image is 200 pixels wide: <img style="float:left" /> <div style="margin-left: 220px;"> Text goes here </div> That should be all you need. Ben C wrote: > On 2006-09-27, axlq <axlq(a)spamcop.net> wrote: > > In article <slrnehl7ck.qh9.spamspam(a)bowser.marioworld>, > > Ben C <spamspam(a)spam.eggs> wrote: > >>On 2006-09-27, shapper <mdmoura(a)gmail.com> wrote: > >>> What is the best way to place an image and a text side by side using > >>> CSS? > >>>... > >>> Like to table columns. > >>> However, I was looking to do this without a table. > >> > >>Put the text in a <div> or something, and make both the image and div > >>float: left. Put the <img> immediately before the <div> in the source: > > > > Won't that cause the text to flow around the image underneath, if the > > text is long enough? > > No, because the text is in a floating box of its own. They both float > around any other inline stuff that might be in the containing box, in > this case nothing. > > > If the OP actually wants columns, then I have found that the best, > > most reliable, most browser-compatible way to make columns is to use > > side-by-side table cells. [...] > > You're probably right. |