Question 42831 in Html Question posted in
Some basic documentation can be found here.

List items to the right of a left floating div do not align properly – Html

List item bullets do not align properly to the right of a left floating div. The minimal code goes like this:

<div style="float:left; background-color:red;width:100px;">aa<br>bb<br>cc<br>dd</div>
<p>Title</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

https://jsfiddle.net/Lg73hzfa/

Some suggestions from other posts and their drawbacks:

  • Set <ul> display to table-cell. Problem is the whole list is pushed to the right without really floating under the <div>. https://jsfiddle.net/962m8egt/
  • Add position: relative; and left: 1em; to <li>. The problem is that this brakes accessibilty to clickable items in right floating divs. Another problem is that a long item will overlap with the right floatin box. https://jsfiddle.net/nbx8g7tv/
  • Set <ol> list-style-position to inside as suggested below but it brakes the alignment of the item content when it flow on more than one line. https://jsfiddle.net/15v9s0fg/

I need a solution that work even if the content is dynamic. Whatever the width of the div (which can be replaced by an image) or the length of the list. List items have to wrap to the left around the div when the list gets longer than the div.

Here is an example with an image: https://jsfiddle.net/15v9s0fg/1/

Thanks for any better suggestion?

Tags:

2

Answers


  1. 0

    The default list-style-position is outside, you can change it to inside for you case:

    div {
  float: left;
  background-color: red;
  width: 100px;
}

ul {
  list-style-position: inside;
}
    <div>
  aa<br>
  bb<br>
  cc<br>
  dd
</div>

<p>Title</p>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

    https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

    Login or Signup to reply.
  2. 0

    The inline style of the div element is affecting the bullet points alignment.
    So for that there are 2 ways so that the right side section does not affect.

    • Remove the width applied to the div section from inline style
    <div style="float:left; background-color:red;">aa<br>bb<br>cc<br>dd
</div>
<p>Title</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
    • Keep all the styles as it is and add height to that div of around 100px like,
    <div style="float:left; background-color:red;width:100px;height:100px;">aa<br>bb<br>cc<br>dd
</div>
<p>Title</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

    So this will add a specific height to that section and the last bullet will come in proper alignmant

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search