HTML Floating Pictures on a Page

Jump to solution
Community Participant


I am trying to design a page with a picture floating to the left. I am ok with HTML and have been successful in getting the image to float where I want. However, I am stuck in moving the text to the right because my bullet points are overlapping the image.  Here is a picture:


Overlapping Question.JPG

Here is the HTML code:

<p>Based on clues from the story tell what book you are reading and make a prediction about what will happen next...</p>
<p><span style="font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt; color: var(--ic-brand-font-color-dark);"><img style="float: left;" src=";cs=tinysrgb&amp;fit=ma..." alt="Thinking Stems" width="175" height="193" data-api-endpoint="" data-api-returntype="File" /></span></p>
<li>I think __________ will happen because...</li>
<li>I can predict that...because...</li>
<li>Next, I think the characters will...</li>
<li>Since __________ happened, I think...</li>

Labels (1)
2 Solutions
Community Participant

I wonder if you could add padding to the image through HTML so that the bullet points would start further to the right? Not sure if this works with a floating element but just a thought. Here are some sources about padding: 

View solution in original post

Community Participant