HTML Floating Pictures on a Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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:
<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&cs=tinysrgb&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> </p>
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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/
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Awesome! So glad you fixed it!