Skip to main content

Fix overlapping lists and floating content (SAP KC)

Author: This article is written by Ryan Cerniglia

This article enables authors to fix this overlap by adding a CSS class to their list. When you have an image or other content floated on a page, it can overlap list item bullets or numbers. As a site administrator, you will need to setup a site-wide override.



Site Administrator Steps

  1. Open the Site Tools > Control Panel menu
  2. Select the Custom Site CSS option
  3. Add the following CSS code to the end of your All Roles CSS on its own new line:
    .mt-overflow-auto {
        overflow: auto;
  4. Click the Save Changes button

Content Author Steps

Apply a new CSS class to your list

  1. Go to an article in your MindTouch site and click Edit Page
  2. In the editor, select View > Source (editing HTML)
  3. Add the following text in the list tag (<ol> or <ul>): class="mt-overflow-auto"
  4. The list should look similar to the following:
    <ul class="mt-overflow-auto">
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
  5. Save the page


Example Before Fix

pictures.pngLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis, ligula ac convallis ornare, dui tortor tincidunt dolor, nec laoreet dui nunc vitae tortor. Donec eu massa id est faucibus ultricies a nec nibh.

  • A list item
  • A list item
  • A list item
  • A list item

Example After Fix


Lorem ipsum dolor sit amet, consecteturadipiscingelit. Maurismattis, ligula ac convallisornare, duitortortincidunt dolor, neclaoreetduinunc vitae tortor. Doneceumassa id estfaucibusultricies a necnibh.


  • A list item
  • A list item
  • A list item
  • A list item
  • Was this article helpful?