About those floating right-aligned images...

[Malisk]

OK, I was thinking about having several paragraphs going something like this:

<img align="right" src="image1.jpg">
<h2>Section 1</h2>
<p>Words under this section...</p>

<img align="right" src="image2.jpg">
<h2>Section 2</h2>
<p>Words under that section...</p>

It's working as intended with the images being floating and right-aligned next to the sections, BUT with the problem of image1's vertical size making it "bleed" into the section below and "pushing down" image2 so everything gets kind of messed up, because only its image is pushed down, not the actual text of Section 2.

What I'd like to do would be to somehow make the full Section 1 be treated as a unit so that if image1 has a vertical height taller than the total section + paragraph height of Section 1, the entire Section 2 will be moved down, not just its image.

You see what I mean? Otherwise I can post a picture example. :)

I have some vague memory of a CSS property (or maybe it was a HTML attribute?) called something like "break" to somehow do what I wish?

[raskren]

A picture would be helpful.

Cluttering up your HTML with "align=right" is bad practice. Since alignment is a presentational attribute, you should be controlling it with a stylesheet.

You probably want to give both images a class with "float:right".

[Malisk]

Yes, I'm already using mostly CSS for presentation, but it seems not that one. :)

Thanks for the pointer; I'll look into moving it to my stylesheet.

Right now the page using the right aligned images look like this:

And I want them to be better aligned, like this:

Note how the latter example has the sections better lining up with the images. The images are intended to be associated with the sections, but I don't want to have them below each section text, because then they'll waste space a bit.

[Rob Veteran]

If you set "clear:both" in CSS of your heading elements, and then use "float:right" on your image elements, you should achieve the effect you want.

Floating is the equivalent of "align=right", and the clearing CSS means it'll only start after the floats are finished (i.e. after the image is done).

[Malisk]

Thanks! That was what I had some memory of, but didn't recall exactly how to use it. :)

I'll give my headings a CSS class so I won't have to clear:both them all, and likewise with my images as for the floating. The sections are systematically used like this on a few pages.

[Antaris Veteran]

My CSS is a bit rusty, but generally I tend to add an extra element after all of the floating elements to act as a gutter to ensure everything sizes correctly:

<style type="text/css">
	.gutter { clear: both; }
	.right { float: right; }
</style>
<div style="background-color: navy;">
	<div id="myFloatingContent" class="right" style="width: 100px; height: 100px; background-color: maroon; color: white;">Some Text Here</div>
	<div class="gutter" />
</div>