J
jersie0
I am trying to lay out an area of a page with a left justified
paragraph, followed by one or more images with captions under them,
and possibly more paragraphs. These images or paragraphs would
continue to the right edge of the window, then wrap under and begin
anew, left to right.
To implement this, I have set up the following:
<head>
<STYLE TYPE="text/css">
.left80 { text-align: left; width: 80% }
.left25 { text-align: left; width: 25% }
.leftimg { float: left; padding: 3px; border: 0 }
.rightimg { float: right; padding: 3px; border: 0 }
div.captioned { float: left }
div.captioned p { text-align: center; }
</style>
</head>
<body>
<div class="left25">
<p>The text of a paragraph that I would like to continue for 25% of
the window, then wrap. This paragraph could go on and on...</p>
</div>
<div class="captioned">
<p>
<img alt="img1" src="img1.jpg"><br>
Image 1 caption
</p>
</div>
<div class="captioned">
<p>
<img alt="img2" src="img2.jpg"><br>
Image 2 caption
</p>
</div>
<div class="captioned">
<p>
<img alt="img3" src="img3.jpg"><br>
Image 3 caption
</p>
</div>
+++++
The images seem to work great - they float left until the right edge
of the window is reached, then neatly drop to the next line, so to
speak and continue right.
However, I want img1 to be lined up with the opening paragraph (that
is, the top of img1 lines up with the top of the text of the
paragraph). And no matter what I try, img1 always winds up on the
left margin, instead of to the right of the first paragraph.
What am I doing wrong, and is there a better css way than I'm using to
implement this?
paragraph, followed by one or more images with captions under them,
and possibly more paragraphs. These images or paragraphs would
continue to the right edge of the window, then wrap under and begin
anew, left to right.
To implement this, I have set up the following:
<head>
<STYLE TYPE="text/css">
.left80 { text-align: left; width: 80% }
.left25 { text-align: left; width: 25% }
.leftimg { float: left; padding: 3px; border: 0 }
.rightimg { float: right; padding: 3px; border: 0 }
div.captioned { float: left }
div.captioned p { text-align: center; }
</style>
</head>
<body>
<div class="left25">
<p>The text of a paragraph that I would like to continue for 25% of
the window, then wrap. This paragraph could go on and on...</p>
</div>
<div class="captioned">
<p>
<img alt="img1" src="img1.jpg"><br>
Image 1 caption
</p>
</div>
<div class="captioned">
<p>
<img alt="img2" src="img2.jpg"><br>
Image 2 caption
</p>
</div>
<div class="captioned">
<p>
<img alt="img3" src="img3.jpg"><br>
Image 3 caption
</p>
</div>
+++++
The images seem to work great - they float left until the right edge
of the window is reached, then neatly drop to the next line, so to
speak and continue right.
However, I want img1 to be lined up with the opening paragraph (that
is, the top of img1 lines up with the top of the text of the
paragraph). And no matter what I try, img1 always winds up on the
left margin, instead of to the right of the first paragraph.
What am I doing wrong, and is there a better css way than I'm using to
implement this?