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>
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;
}