text and images

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

i have a series of images with text descriptions next to each one of them.
all are placed within a table.

my problem is that when there are too many text & images in the table the
last image in the row automatically get placed in a new line, which is what
you'd expect.  this is fine for the most part except for one issue.
sometimes the image and its description get split up so that in one line you
would have the image and on the next the description.

my question is how do i make the image and text "fuse" together so that if
there is no space for the image or the text on the current row they BOTH get
placed on a new line instead of one staying on the line above and the other
breaking to a new line.

Thanks for helping me.

Re: text and images

Quoted text here. Click to load it

Please consider using normal spelling with mixed case as well as a real
From line in your message, if you want to be taken seriously.

Please include a URL of a specific page, if you wish to get help with a
specific page or specific problem. To begin with, there are about 42
different ways to put images and descriptions (or captions) in a table.
Generally, solutions depend on problems, and we don't really know the

Quoted text here. Click to load it

Really? I didn't expect that. Sounds you have used the 43rd way.

Quoted text here. Click to load it

In general, with no regard to any specific existing design and
implementation (since they were not specified), you could put an image and
the associated text (caption) in a single-cell table, and use align="left"
in the <table> tags. This is the pure HTML approach, which isn't really
modern and stylish, but it might work sufficiently well. It should also
work for cases where the text is on the right of the image, which might be
what you're after, though not common, and perhaps not a good idea; it's
more normal to put a caption below an image, or sometimes above it.

For an illustration, and some other approaches, see

Yucca, http://www.cs.tut.fi/~jkorpela /
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Re: text and images

__/ [Jukka K. Korpela] on Tuesday 20 September 2005 15:35 \__

Quoted text here. Click to load it

Was this truly necessary? Why do you always have to open up your replies
like that?

Quoted text here. Click to load it

I agree that a URL would have been highly valuable. I think the description
is rather detailed however.

Quoted text here. Click to load it

It sounds to me as if you are trying to do something the wrong way. If you
put images and text in a table, which is not ideal, ensure they are placed
in the same table cell.

I suggest that you look into design with standards and have stylesheets
involved. If you have images and captions, define them (semantically) to be
images with some bound description. Don't have an organic mix of floating
objects that are forced to lie within a table. The way that you work at the
moment is bound to fail, especially if you resize the browser window.

Quoted text here. Click to load it

In the future, sending a picture (screenshot) or an address of a Web page
would be extremely helpful. Answers would be more fruitful. Those who reply
to you would also feel like they truly answer your question rather than
waiving some 'fluffy' answers, which may or may not have any pragmatic


Roy S. Schestowitz      | United States: #1 in spam export
http://Schestowitz.com  |    SuSE Linux    |     PGP-Key: 74572E8E
  5:40pm  up 26 days  5:54,  4 users,  load average: 0.00, 0.10, 0.18

Re: text and images

Quoted text here. Click to load it

If I may try my hand at a quick "fluffy" answer:

If you put the image and the text in the same cell, your
particular problem will disappear. If you can live with the text
underneath the pic, (often quite nice), just put the img, then a
<br>, then the text. If you want to align things nicely, you
need to use a bit of css. For example the <td> can be styled to
centre and pad things. You can use a div to hold all inside the
cell centered and style a <p> within the cell or within the div
within the cell so that you can centre the text left but the
whole p sits nicely in the centred div (underneath the pic). If
you want the text to the right or left, you can float the image
left and put the pic and text in the same cell.

If you can do all this after playing around, you might even get
to do without the table itself.

If you must have a table and the image in one cell, the text in
the next and like that, just make sure you finish the row after
a text cell, </td></tr> and start the new row <tr><td>... You
must judge how many pairs are likely on a line (allow say 600 px
for *the lot* to avoid folk scrolling horizontally. Thus if your
pics are small and thumb sized, you can have many pairs, but if
they are bigger, maybe only one pair of "pic/text" per line

Like this:


This won't break in the way you describe. If you are not worried
about horizontal scrolling for people with small screens, you
can have more on one line than I suggest.

I think you must have forgotten to put something like row close
or new row or something to get your symptoms?



Site Timeline