HTML Floating Pictures on a Page

Jump to solution
schjen
Community Participant

Hello!

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="https://images.unsplash.com/photo-1493612276216-ee3925520721?crop=entropy&amp;cs=tinysrgb&amp;fit=ma..." alt="Thinking Stems" width="175" height="193" data-api-endpoint="https://holmen.instructure.com/api/v1/courses/21101/files/940139" data-api-returntype="File" /></span></p>
<ul>
<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>
</ul>
<p>&nbsp;</p>

Labels (1)
0 Likes
2 Solutions
chrhitch
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:  https://www.educba.com/html-image-padding/
https://allusefulinfo.com/how-to-add-padding-around-the-image-in-html/ 

View solution in original post

chrhitch
Community Participant