I've got long tables two cells per row, one with an image and the other with corresponding text, that alternate in each row, like so:<br />
<br />
<tr><br />
<td>IMAGE</td><br />
<td>TEXT</td><br />
</tr><br />
<tr><br />
<td>TEXT</td><br />
<td>IMAGE</td><br />
</tr><br />
<br />
The problem: The images are all different sizes. When I have the image on the right, the text on the left aligns just fine, right up against the image. But when I have the image on the left, there's a big gap between the edge of the image and the beginning of the text that looks pretty stupid. How can I force the right-sided text to line up flush against the left-sided image? I've tried using different width attributes for the individual cells but that doesn't change it a bit.<br />
?????<br />
Tnx,<br />
Skolya<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/earrings.html">www.jerizjoolz.com/earrings.html</a><!-- w --><br />
or<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/bracelets.html">www.jerizjoolz.com/bracelets.html</a><!-- w --><!--content-->I'm not sure what you're looking for...This?<br />
<br />
<tr> <br />
<td align="right">IMAGE</td> <br />
<td align="left">TEXT</td> <br />
</tr> <br />
<tr> <br />
<td align="right">TEXT</td> <br />
<td align="left">IMAGE</td> <br />
</tr><!--content-->Not exactly--here's what I want it to look like:<br />
----------<br />
| IMG | This is a really ugly necklace that I<br />
| | wouldn't expect you to pay 2 cents for!<br />
| | Price: $5,677.00<br />
----------<br />
<br />
-------<br />
On the other hand, here's a truly rare and | IMG |<br />
wonderful 1920s Eisenberg Original that's | |<br />
been appraised at $1,365.00! | |<br />
Price: $1.25 | |<br />
| |<br />
-------<br />
<br />
In other words, each row the same length with<br />
equal margins on the page, but adjustable <br />
individual cells. First I tried pixel widths, then <br />
percentage widths--no luck. Got <br />
any better ideas?<br />
PS: How come ASCII art doesn't work here? Let me try something else:<br />
<br />
This is how the right-sided text should<br />
look....<br />
<br />
And this is how the left-sided text
<br />
should look
<br />
<br />
That doesn't work either; this is almost as frustrating as my pages! Let me go try your suggestions anyway.<br />
Tnx,<br />
Skolya<!--content-->Post a link, that should work fine.<!--content-->www.jerizjoolz.com/earrings.html<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/bracelets.html">www.jerizjoolz.com/bracelets.html</a><!-- w --><br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/necklaces.html">www.jerizjoolz.com/necklaces.html</a><!-- w --> (which isn't up yet but it's the worst, so I'm going to go do it right now)<br />
tnx,<br />
skolya<!--content-->necklaces is now up too.<!--content-->I'm going to upload a text file of the ASCII art, which makes it all very clear.<br />
skolya<!--content-->What you will need to do is nest tables, something like this...<br />
<br />
<table width="500" border=1><br />
<tr><br />
<td><br />
<table><br />
<tr><br />
<td align="right" width="100">IMAGE</td> <br />
<td align="left" width="400">TEXT</td> <br />
</tr><br />
</table><br />
</td><br />
</tr> <br />
<tr><br />
<td><br />
<table><br />
<tr><br />
<td align="right" width="400">TEXT</td> <br />
<td align="left" width="100">IMAGE</td> <br />
</tr><br />
</table><br />
</td><br />
</tr><br />
</table>It's not pretty, but...<!--content-->Originally posted by skolya <br />
PS: How come ASCII art doesn't work here?<br />
<br />
This is a HTML board, and HTML browsers are supposed to cut away extra whitespace. Try using [ code] to keep the whitespece in<br />
<br />
<br />
----------<br />
| IMG | This is a really ugly necklace that I<br />
| | wouldn't expect you to pay 2 cents for!<br />
| | Price: $5,677.00<br />
----------<br />
<br />
<br />
Anyway, this is how I would do your page.<br />
<br />
<div class="boxleft"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
<div class="boxright"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
<div class="boxleft"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
with this in the headsection<br />
<style type="text/css"><br />
body {text-align:center;}<br />
.boxleft, .boxright {clear:both; width: 400px; margin:20px auto; text-align:left;}<br />
.boxleft img {float:left}<br />
.boxright img {float:right}<br />
</style><!--content-->
<br />
<tr><br />
<td>IMAGE</td><br />
<td>TEXT</td><br />
</tr><br />
<tr><br />
<td>TEXT</td><br />
<td>IMAGE</td><br />
</tr><br />
<br />
The problem: The images are all different sizes. When I have the image on the right, the text on the left aligns just fine, right up against the image. But when I have the image on the left, there's a big gap between the edge of the image and the beginning of the text that looks pretty stupid. How can I force the right-sided text to line up flush against the left-sided image? I've tried using different width attributes for the individual cells but that doesn't change it a bit.<br />
?????<br />
Tnx,<br />
Skolya<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/earrings.html">www.jerizjoolz.com/earrings.html</a><!-- w --><br />
or<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/bracelets.html">www.jerizjoolz.com/bracelets.html</a><!-- w --><!--content-->I'm not sure what you're looking for...This?<br />
<br />
<tr> <br />
<td align="right">IMAGE</td> <br />
<td align="left">TEXT</td> <br />
</tr> <br />
<tr> <br />
<td align="right">TEXT</td> <br />
<td align="left">IMAGE</td> <br />
</tr><!--content-->Not exactly--here's what I want it to look like:<br />
----------<br />
| IMG | This is a really ugly necklace that I<br />
| | wouldn't expect you to pay 2 cents for!<br />
| | Price: $5,677.00<br />
----------<br />
<br />
-------<br />
On the other hand, here's a truly rare and | IMG |<br />
wonderful 1920s Eisenberg Original that's | |<br />
been appraised at $1,365.00! | |<br />
Price: $1.25 | |<br />
| |<br />
-------<br />
<br />
In other words, each row the same length with<br />
equal margins on the page, but adjustable <br />
individual cells. First I tried pixel widths, then <br />
percentage widths--no luck. Got <br />
any better ideas?<br />
PS: How come ASCII art doesn't work here? Let me try something else:<br />
<br />
This is how the right-sided text should<br /> look....<br /><br />
And this is how the left-sided text
<br />should look
<br /><br />
That doesn't work either; this is almost as frustrating as my pages! Let me go try your suggestions anyway.<br />
Tnx,<br />
Skolya<!--content-->Post a link, that should work fine.<!--content-->www.jerizjoolz.com/earrings.html<br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/bracelets.html">www.jerizjoolz.com/bracelets.html</a><!-- w --><br />
<!-- w --><a class="postlink" href="http://www.jerizjoolz.com/necklaces.html">www.jerizjoolz.com/necklaces.html</a><!-- w --> (which isn't up yet but it's the worst, so I'm going to go do it right now)<br />
tnx,<br />
skolya<!--content-->necklaces is now up too.<!--content-->I'm going to upload a text file of the ASCII art, which makes it all very clear.<br />
skolya<!--content-->What you will need to do is nest tables, something like this...<br />
<br />
<table width="500" border=1><br />
<tr><br />
<td><br />
<table><br />
<tr><br />
<td align="right" width="100">IMAGE</td> <br />
<td align="left" width="400">TEXT</td> <br />
</tr><br />
</table><br />
</td><br />
</tr> <br />
<tr><br />
<td><br />
<table><br />
<tr><br />
<td align="right" width="400">TEXT</td> <br />
<td align="left" width="100">IMAGE</td> <br />
</tr><br />
</table><br />
</td><br />
</tr><br />
</table>It's not pretty, but...<!--content-->Originally posted by skolya <br />
PS: How come ASCII art doesn't work here?<br />
<br />
This is a HTML board, and HTML browsers are supposed to cut away extra whitespace. Try using [ code] to keep the whitespece in<br />
<br />
<br />
----------<br />
| IMG | This is a really ugly necklace that I<br />
| | wouldn't expect you to pay 2 cents for!<br />
| | Price: $5,677.00<br />
----------<br />
<br />
<br />
Anyway, this is how I would do your page.<br />
<br />
<div class="boxleft"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
<div class="boxright"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
<div class="boxleft"><br />
<img><br />
Textdescription<br />
</div><br />
<br />
with this in the headsection<br />
<style type="text/css"><br />
body {text-align:center;}<br />
.boxleft, .boxright {clear:both; width: 400px; margin:20px auto; text-align:left;}<br />
.boxleft img {float:left}<br />
.boxright img {float:right}<br />
</style><!--content-->