Image and Text Side By Side

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

On 2006-09-27, shapper <mdmoura (AT) gmail (DOT) 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>

In article <slrnehl7ck.qh9.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2006-09-27, shapper <mdmoura (AT) gmail (DOT) 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

On 2006-09-27, axlq <axlq (AT) spamcop (DOT) net> wrote:

In article <slrnehl7ck.qh9.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
On 2006-09-27, shapper <mdmoura (AT) gmail (DOT) 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.

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 (AT) spamcop (DOT) net> wrote:
In article <slrnehl7ck.qh9.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
On 2006-09-27, shapper <mdmoura (AT) gmail (DOT) 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.

In article <slrnehl996.qh9.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

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.

Except the columnar aspect would get lost if the browser window is
narrowed too far, when one box wraps under the other, no? I guess you
could put both boxes in a no-wrap container.

-A

In article <1159448501.873388.121850 (AT) m73g2000cwd (DOT) googlegroups.com>,
matthom (AT) gmail (DOT) com <matthom (AT) gmail (DOT) com> wrote:

Tables should always be used for tabular data only - not for
presentation or layout purposes.

This mantra gets repeated a lot, and while the intention is good,
the problems with it are well known, so I won't restart the argument
again here.

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.

No, that's not columnar presentation. The text will wrap under the
image. Try doing it in CSS in such a way that always preserves the
side-by-side relationship. It's not as straightforward as a table,
and you end up with just about as many markup elements. In this
case, there's not much semantic difference between <div> and <td>.

-A

On 2006-09-29, axlq <axlq (AT) spamcop (DOT) net> wrote:

In article <slrnehl996.qh9.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
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.

Except the columnar aspect would get lost if the browser window is
narrowed too far, when one box wraps under the other, no?

Yes it will.

I guess you could put both boxes in a no-wrap container.

I'm not sure that would work-- the white-space property only affects
text layout, not float placing.

You could give each column a % width-- 50% each (or a bit less if they
have borders/padding/margins). Then you should get two side-by-side
columns no matter how narrow the viewport is, until you reach the point
that one of the columns is narrower than the longest word in it.

If you set a min-width on the div that the two columns are in, then past
that point, you'll get a horizontal scrollbar, which might be better
than one column jumping below the other.

I think it's simpler to just use a table though.

No, that's not columnar presentation.

The OP was just looking for a way to have text appear to the right of
an image. The CSS and HTML I mentioned will work - have you tried it?

The text will wrap under the image.

No, it won't. The "float: left" will make the image float left, while
everything in the markup AFTER the image will float to the right of the
image. The margin-left is necessary, however.

It's not as straightforward as a table,
and you end up with just about as many markup elements.

img style="float:left" /
div style="margin-left: 220px;"
/div

How could the above be MORE markup than a table? We have the <img> and
the <div> - that's it.

A table is not meant for layout - use CSS - it allows for much more
control, and it makes future changes much easier for the developer.



axlq wrote:

In article <1159448501.873388.121850 (AT) m73g2000cwd (DOT) googlegroups.com>,
matthom (AT) gmail (DOT) com <matthom (AT) gmail (DOT) com> wrote:
Tables should always be used for tabular data only - not for
presentation or layout purposes.

This mantra gets repeated a lot, and while the intention is good,
the problems with it are well known, so I won't restart the argument
again here.

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.

No, that's not columnar presentation. The text will wrap under the
image. Try doing it in CSS in such a way that always preserves the
side-by-side relationship. It's not as straightforward as a table,
and you end up with just about as many markup elements. In this
case, there's not much semantic difference between <div> and <td>.

-A

matthom (AT) gmail (DOT) com wrote:

A table is not meant for layout - use CSS - it allows for much more
control

'Control' is a poor choice of words since the author doesn't actually
have any. 'Flexibility' may be better.

--
Berg