CSS for left-side graphic, right-side explanatory text?

[Phlawm53]

I'm going 'round in circles but just can't figure out how to set up the CSS styles required to put a graphic on the left-side of a one-column page, and some explanatory text to the right of that graphic.

For a start, I definitely do NOT want a two-column layout.

What I have is a tall, relatively thin user-interface screenshot that I currently place left-aligned on the page. "Normal" text exists above and below the graphic and its caption. So far, so good -- that part's easy.

But that simple layout also wastes useful space — to the right of the graphic is a big blank space that could be used to explain the u.i. element's controls, etc.

So what I want to do is be able to put explanatory text to the right of that graphic. Not callouts, mind you, but instead to be able to start a paragraph top-aligned with the graphic's top edge, then freely create paragraphs or lists to the right of that graphic. If I've completed that right-side text, I'd then like to be able to resume the "normal" single-column text flow below the graphics lower boundary:

ExampleLayout.png

The rescaled image's text is no longer readable, but the text to the right of the graphic is what I'm trying to setup. Note that above the image is a caption which I've allowed to run beyond the graphic's right edge. That's fine with me.

All the things I've tried to set up in CSS haven't worked well if at all.

So can someone please tell me how can I do this in CSS.? I'd especially like the setup to be "clean" so that some other writer doesn't need to be a CSS scientist to make use of the design.

Cheers & thanks,
Riley

[wclass]

Try this:

Code: Select all

img.right  { float: right;  margin-left: 15px; }
img.left   { float: left; margin-right: 15px; }
p.imgclear { clear: both; }

I can choose a right or left floating image; I add a bit of a margin so the text doesn't bump into the picture. I set a blank paragrpah to "class="imgclear" if I have finished the right-side explanatory text, but this is not necessary.

In the main document, you put the image first (assign the right or left class) then follow it with your text. Plain text works OK, but bullets or lists need a bit extra work if they are to display properly down the right.

[Andrew]

What you need is fairly easy to do. Create a image class (for example, img.Float) and set the float property to left. Then create a paragraph class (for example, p.Float), and set the clear property to none. Finally, for your normal body text class (or the p element if you don't use a class), set the clear property to left.

Then, when you insert your image, assign the img.Float class to it. For the text you want to float to the right of it, assign the p.Float class. When you want to go back to not-floating, change back to your normal body style, and the float will end.

Tip! When using the float image class, it's a good idea to add some margin-right to the class, or the text will be crunched against it.

[Phlawm53]

Genunine thanks to all who responded.

So far, so good!

Cheers & thanks 'gain,
Riley

[ChoccieMuffin]

I have had problems with having bulleted text alongside graphics, so you might want to avoid them in the p.float bit. (Disclaimer: I'm not an expert by any stretch of the imagination.)

[Andrew]

I have had problems with having bulleted text alongside graphics, so you might want to avoid them in the p.float bit. (Disclaimer: I'm not an expert by any stretch of the imagination.)

Yes, there are definitely problems with floats and bullets -- at least, I've seen a lot of problems as well. I'm not sure if they are Flare problems, or more issues with floats in CSS / html.

[Craig.Prichard]

So does anyone have any CSS suggestions for ordered and unordered lists in the p.float next to img.right or img.left? Thank you.

[Nita Beck]

Prior to Flare 7, a floating image appearing beside a numbered or bulleted list caused the numbers or bullets to not be displayed.

This problem appears to have been fixed in Flare 7. I just examined a project I worked on only last week using Flare 6.1 that exhibited the problem. I then examined the same project in Flare 7 and, voila, problem is solved. No missing numbers or bullets beside floating images.