HTML Floating Pictures on a Page

schjen

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:

 

Here is the HTML code:

Based on clues from the story tell what book you are reading and make a prediction about what will happen next...

https://images.unsplash.com/photo-1493612276216-ee3925520721?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw3NjA3NHwwfDF8c2VhcmNofDF8fHRoaW5raW5nfGVufDF8fHx8MTY0Nzk3OTU5OA&ixlib=rb-1.2.1&q=80&w=1080" alt="Thinking Stems" width="175" height="193" data-api-endpoint="https://holmen.instructure.com/api/v1/courses/21101/files/940139" data-api-returntype="File" />

• I think __________ will happen because...
• I can predict that...because...
• Next, I think the characters will...
• Since __________ happened, I think...

 

chrhitch

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/