This one ought to be simple, but I have dug myself deeper and deeper,
and gone farther and farther from what I wanted and I'm giving up. And
my html that I've written is so bolloxed up now that it's not worth
posting.
I would like to have two paragraphs, side by side, across the browser
window (everything I say here assumes that the browser window is sized
wide enough to accomodate things of course). The left paragraph is to
have a jpg aligned with the top left of the paragraph, and a bolded,
centered caption underneath it. The right paragraph is to have a jpg
aligned with its top right and a bolded, centered caption underneath it
(by "centered caption" I mean the caption is centered across the width
of the jpg). The paragraphs should both have text left-justified, and
there should be enough whitespace between the two paragraphs that they
are clearly distinct and separate.
Below is a fragment from an early cut at what I wanted, which yielded
results closer to what I wanted than anything I'd gotten since. I don't
have access to a Windows computer today, but in Macintosh, here are the
issues that I have with the results:
Internet Explorer 5.5: Why does the top edge of paragraph text fall
below the top edge of the image for the left paragraph? Why, no matter
how wide I make the window, does the right paragraph text come under the
right image, rather than with its top edge even with that of the left
paragraph, and with the right image aligned with the right top edges of
the paragraph text?
Netscape 7.1: Why do the top edges of the images align not with the top
of the paragraphs, but with the second line of the paragraphs?
Otherwise, everything looks okay.
Yes, I'm using a Mac, but I had similar problems on Windows computers
yesterday (IE 6.0, Netscape 7.1). I assume that if I do this correctly,
it will show up as I'd like in both browsers on both platforms.
The question is... how do I do it correctly???
html snippet follows:
=====================
<style>
div.photo_l {
float: left; margin: 2px;
}
div.photo_r {
float: right; margin: 2px;
}
div.photo_l, div.photo_r p {
text-align: center; font-size: 80%; font-weight: bold;
}
</style>
<body>
<div style="width: 47%; float: left;">
<div class="photo_l">
<p style="width: 200"><img alt="leftfoo.jpg" src="leftfoo.jpg"
height="310" width="200"><br>
The caption for the left photo</p>
</div>
<p>And this is where the text of the left paragraph would go. It is
supposed to be so that the leftfoo.jpg aligns with its top and its left.
If the paragraph text were long enough, I'd like it to wrap under the
leftfoo.jpg image.</p>
</div>
<div style="width: 48%; float: right; ">
<div class="photo_r">
<p><img alt="rightfoo.jpg" src="rightfoo.jpg" height="240"
width="160"><br>
The caption for the right photo</p>
</div>
<p>And this is where the text of the right paragraph would go. It is
supposed to be so that the rightfoo.jpg aligns with its top and its
right. If the paragraph text were long enough, I'd like it to wrap
under the rightfoo.jpg image. Assuming a wide-enough browser window,
left to right we should have the left paragraph, with the leftfoo.jpg
picture at its upper left, some whitespace, and the right paragraph with
the rightfoo.jpg picture aligned with its upper right. Both photos
should have bolded captions centered under them.</p>
</div>
</body>
