How to get text besides image using Float: left and Padding in HTML?

Prashant Thanka · ‎02-08-2022

I have attempted to upload a Word document to create a knowledge base article and the result is not what I wanted.

I am writing up a KBA and it has image and I was looking to enter text besides it, however, when I use the float: left function, the text does show up on the right side of the image but it is very close to the image.

I am not well versed with HTML and I have not been able to find a solution. Any help will be immensely appreciated.

I am pasting the text here:

<html>We have upgraded our IT Telecommunications services to increase user productivity and collaboration capabilities. This upgrade includes a new CISCO IP desk phone, meeting room conference phones and the Jabber Instant Messenger client and Softphone. This KBA will help to familiarize you with the features and functionality of your new phone and Instant Messenger and Softphone client.
Quick Start Guide for 7841 Phone Model
<img style="float: left;" title="" src="sys_attachment.do?sys_id=0d59031d1bed8d9053a8c9522a4bcbf6" alt="" width="701" height="566" align="baseline" border="0.75" hspace="" vspace="">
<style>
{
padding-left: 50px;
}
</style>
<body>
<code><code>Your Phone</code>
<code>Cisco IP Phone 7841 shown.</code>
<code>1 Incoming call or voicemail indicator</code>
<code>2 Line and feature buttons</code>
<code>3 Softkeys</code>
<code>4 Navigation (navigation ring and Select button)</code>
<code>5 Hold, Transfer, and Conference</code>
<code>6 Speakerphone, Headset, and Mute</code>
<code>7 Voicemail, Applications, and Directory</code>
<code>8 Volume</code>
</body>

</html>

Can someone please let me know where I am going wrong?
Many thanks.

AnirudhKumar · ‎02-08-2022

This look good?

<div>
<p>We have upgraded our IT Telecommunications services to increase user productivity and collaboration capabilities. This upgrade includes a new CISCO IP desk phone, meeting room conference phones and the Jabber Instant Messenger client and Softphone. This KBA will help to familiarize you with the features and functionality of your new phone and Instant Messenger and Softphone client.</p>
</div>
<div>
<p>Quick Start Guide for 7841 Phone Model</p>
</div>
<div>
<div style="float: left;">
<p><img title="" src="sys_attachment.do?sys_id=0d59031d1bed8d9053a8c9522a4bcbf6" alt="" width="701" height="566" align="baseline" border="0.75" hspace="" vspace="" /></p>
</div>
<div style="float: right;">
<p><code><code>Your Phone</code></code></p>
<p><code>Cisco IP Phone 7841 shown.</code></p>
<p><code>1 Incoming call or voicemail indicator</code></p>
<p><code>2 Line and feature buttons</code></p>
<p><code>3 Softkeys</code></p>
<p><code>4 Navigation (navigation ring and Select button)</code></p>
<p><code>5 Hold, Transfer, and Conference</code></p>
<p><code>6 Speakerphone, Headset, and Mute</code></p>
<p><code>7 Voicemail, Applications, and Directory</code></p>
<p><code>8 Volume</code></p>
</div>
</div>

AnirudhKumar · ‎02-09-2022

Hey @Prashant Thankappan ,

Did the code work?

Prashant Thanka · ‎02-09-2022

Hello Anirudh,

Thank you for your reply.

It now has a big gap. Is there any way we can mention the pixel or percentage?

Taylor20 · ‎02-09-2022

Hi Prashant,

Have you tried using a table for this? It's often easier to create a table with invisible borders and play around in the WYSIWYG if you're new to HTML.

You'll be able to play around with percentage, pixels, and padding.