Keeping An Image On Its Own Line (solved!)

[ArdisRamey]

I'm encountering a problem as a new Flare user I'm sure has a direct and obvious solution - I just can't for the life of me find it!

In my content, I have step-by-step instructions punctuated (where appropriate) by images. No matter what I do (no matter what <br /> or </p> I insert after these images, I can't stop the text that follows it from oozing up to wrap around the image. How do I force a firm line break after my images to keep the following content in its place?

Note: I am looking for local formatting solutions only, at this time, though I'm sure a Stylesheet answer will be appropriate in the future.

Making matters more baffling for me, but hopefully clearer for someone more experienced, I have some styled paragraphs with background/boarder styling. When one of them follows an image, the boarder/background ALSO creeps up behind the image!

Code: Select all

<p>Here is an example of how the creation code for the widget should look after the changes have been added:<img src="../Resources/Images/Image_Name.png" style="padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;width: 70%;float: left;left: 72px;top: 242px;" MadCap:mediastyle="@media print { position: absolute;z-index: 0; }" /><br /></p>
        <p class="note">const client = new WidgetClient() as WidgetGameClient; and setUpWidget(client);</p>

where

Code: Select all

p.note
{
	border-left: solid 4px #3498db;
	line-height: 18px;
	background-color: #f0f7fb;
	background-position: 9px 0px;
	background-repeat: no-repeat;
	background-image: url('../Images/Icons/note.png');
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-left-style: solid;
	border-left-width: 4px;
	border-left-color: #3498db;
}

Gives me this output:

image line break for Flare forum.png

What I'd like is for there to be an image, then some white space, then the paragraph block with its background and formatting, then the rest of the content. Please, can't someone tell me how to accomplish this?

[Psider]

Try removing the float:left from your inline styling. I think you'll also either need a br before the image, or wrap the img in p tags. nd top

<p>Here is an example of how the creation code for the widget should look after the changes have been added:<img src="../Resources/Images/Image_Name.png" style="padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;width: 70%;float: left;left: 72px;top: 242px;" MadCap:mediastyle="@media print { position: absolute;z-index: 0; }" /><br /></p>
<p class="note">const client = new WidgetClient() as WidgetGameClient; and setUpWidget(client);</p>

[ArdisRamey]

Removing "float: left" did the job perfectly.

Thanks!

[ChoccieMuffin]

Or create an empty <p> </p> pair and put your image inside there. Later, when you're applying styles, you can add a class to either the p or the img inside it. A bit like this. (With the float removed as already suggested)

Code: Select all

<p>Here is an example of how the creation code for the widget should look after the changes have been added:</p>
<p><img src="../Resources/Images/Image_Name.png" style="padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;width: 70%;left: 72px;top: 242px;" MadCap:mediastyle="@media print { position: absolute;z-index: 0; }" /></p>
        <p class="note">const client = new WidgetClient() as WidgetGameClient; and setUpWidget(client);</p>