How to do this TD trick with CSS

[Michael Laplante]

One advantage of tables is that images and text in a TD will "stick"
together. New and unrelated text can be entered in a new row and it won't
back up into the image and text in the previous row, i.e.

<tr>
<td>
<left aligned image> Some text here.
</td>
</tr>
<tr>
<td>
I want this text either immediately below the image OR the text of the row
above depending on which one takes up more screen height.
</td>
</tr>

(Hope that makes sense.)

How do I accomplish the same thing with CSS?

I've tried the following:

<DIV>
<left aligned image> Some text here.
</DIV>
<DIV>
This text here appears immediately below the text in the div above and to
the right of the left-aligned image. Not what I want. . .
</DIV>

I also tried encasing the text and images within paragraph blocks within the
divs and that didn't work either.

M

 

[dorayme]

One advantage of tables is that images and text in a TD will "stick"
together. New and unrelated text can be entered in a new row and it won't
back up into the image and text in the previous row, i.e.

<tr>
<td>
<left aligned image> Some text here.
</td>
</tr>
<tr>
<td>
I want this text either immediately below the image OR the text of the row
above depending on which one takes up more screen height.
</td>
</tr>

(Hope that makes sense.)

How do I accomplish the same thing with CSS?

I've tried the following:

<DIV>
<left aligned image> Some text here.
</DIV>
<DIV>
This text here appears immediately below the text in the div above and to
the right of the left-aligned image. Not what I want. . .
</DIV>

I also tried encasing the text and images within paragraph blocks within the
divs and that didn't work either.

M

You have the image floated left, the text will naturally go to
the right, you can control the situation with margins and
padding. There are complications but do it first and then mention
any problems you have.