Line break after a floating image

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
LLawv
Jr. Propeller Head
Posts: 4
Joined: Mon Sep 11, 2017 9:34 am

Line break after a floating image

Post by LLawv »

Hoping a Flare wizard can help me out with this one. As the title suggests, I'm looking for a way to create a line break after a floating image. I realize that probably makes no sense because it goes against what a floating image is and does, but let me explain.

I've got text on the left side of the page and an image on the right. This works great when the text runs long enough to wrap entirely around and beyond the image, but sometimes I have text that is not long enough to wrap beyond the image. For example:
i1.jpg
The text under Heading A isn't long enough to keep Heading B from being positioned next to the image where it does not belong. Here is what I want it to look like:
i2.jpg
As of now I know of two ways to accomplish this, neither of which I want. One is to use a two column table, and the other is to manually insert paragraph breaks. The first option is used in my old MS Word documentation and I'm trying to leave it behind for something better and more efficient. The second option is terrible and unreliable at best.

Anyone know of a way to keep Heading B and its text from wrapping around the floating image if Heading A and its text aren't long enough?
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Line break after a floating image

Post by Psider »

It's hard to say for certain without knowing how the source code is laid out and what your other content is doing, but you could try adding clear: right; to your heading style (e.g. h1 {clear: right;} ). This is saying "move me down until nothing is floating to my right".

Obviously test thoroughly to make sure there aren't any unintended consequences.

For example, maybe there are cases where you want things floating to the right of a heading. If so, I can't think of any automatic way of doing it. The "best" would be creating a class that you could manually apply to specific headings to clear the float.
e.g.
.nofloats { clear: right;}

Edit: also note that if you have several different floating things, setting 'clear' on other things can get you in a mess, or at least I find I do - it's one of the more confusing css features, in my opinion. So keep a backup of your stylesheet and start again if things go pear-shaped. :)
LLawv
Jr. Propeller Head
Posts: 4
Joined: Mon Sep 11, 2017 9:34 am

Re: Line break after a floating image

Post by LLawv »

Thank you! I'll explore your suggestions. Like you said, there's likely no automatic solution for it but I figured it was worth asking.
Post Reply