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

Image and Text Side By Side

P: n/a
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

Sep 27 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
On 2006-09-27, shapper <md*****@gmail.comwrote:
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 <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin the source:

<img src="blah.png" style="float: left"></img>
<div style="float: left">
My Text...
---------------
---------------
---------------
---------------
</div>
Sep 27 '06 #2

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>On 2006-09-27, shapper <md*****@gmail.comwrote:
>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 <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin 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
Sep 27 '06 #3

P: n/a
On 2006-09-27, axlq <ax**@spamcop.netwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>>On 2006-09-27, shapper <md*****@gmail.comwrote:
>>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 <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin 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.
Sep 27 '06 #4

P: n/a
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 <ax**@spamcop.netwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>On 2006-09-27, shapper <md*****@gmail.comwrote:
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 <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin 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.
Sep 28 '06 #5

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>>>Put the text in a <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin 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
Sep 29 '06 #6

P: n/a
In article <11**********************@m73g2000cwd.googlegroups .com>,
ma*****@gmail.com <ma*****@gmail.comwrote:
>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 <divand <td>.

-A
Sep 29 '06 #7

P: n/a
On 2006-09-29, axlq <ax**@spamcop.netwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>>>>Put the text in a <divor something, and make both the image and div
float: left. Put the <imgimmediately before the <divin 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.
Sep 29 '06 #8

P: n/a
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 <imgand
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 <11**********************@m73g2000cwd.googlegroups .com>,
ma*****@gmail.com <ma*****@gmail.comwrote:
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 <divand <td>.

-A
Sep 29 '06 #9

P: n/a
ma*****@gmail.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
Sep 29 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.