From: shapper on
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
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
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
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
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.

 |  Next  |  Last
Pages: 1 2
Prev: CSS and plain text
Next: div a:hover IE 6.0