Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

I have an image floating left with a bulleted list to the right. The bullets are laying on top of the image. How do I move the bullets over?

Last Updated: Apr 16, 2013  |  4956 Views
Topics: Images, Boxes, CSS

Was this helpful? 3   10
A

Answer

Has this happened to you? Adding a bulleted list to the right of an image floating left? And the bullets are overlaying on top of the image?

To get the bullets to move over, you need to a margin-left, but you need to take into account the width of the image.

 

For example, this code would NOT provide enough of a margin-left because it doesn't take into account the width of the image.

 

<p><img src="Image style="float: left; border: 0; margin-right: 10px;" width="107" height="160" /></p>
<p>If you have an urgent or detailed question:</p>
<ul>
<li style="margin-left: 5px;">Text</li>
<li style="margin-left: 5px;">Text</li>
</ul>

Even though added a margin to the picture, which creates space between the regular text (not text in a bulleted list) and you added margin spacing in the actual LI tags, the 5px wasn't enough.

To fix this?

Take the width of the image + 10px = put this in the LI margin-left.

For example:

  • This Image is 107px wide. Add 10px = 117px. Put this in the margin-left: 117px for the <li style>

<p><img src="Image style="float: left; border: 0; margin-right: 10px;" width="107" height="160" /></p>
<p>If you have an urgent or detailed question:</p>
<ul>
<li style="margin-left: 117px;">Textt</li>
<li style="margin-left: 117px;">Text</li>
</ul>

 

Answered by Talia RichardsBookmark and Share

Other Answers / Comments (0)

    Need Help?

    This site is shutting down by, if not before, March 31, 2018.

    LibGuides v1 servers are also shutting down at that time.

    See LibGuides v2 documentation instead.


    Support:

    Follow LibGuidesFAQ on Twitter Follow us on Twitter!