Why don't UL bullets stay within their containing DIV?

Question

I have a really simple set up:

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>

I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.

The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.

To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.

Is there a CSS fix for it or other layout fix?

Polyandrous

Answer 1

You'll want to use list-style-position:

ul {
   list-style-position: inside;
}

Claimant

This is probably one of the better ways to get the bullet inside the div, however you have to keep in mind that IE vs Standards Compliant browsers (Firefox, Safari, etc) don't treat the bullet the same. – Housum

It fixed it but why is it even needed? Surely you should not be able to break out of a div? – Polyandrous

Welcome to the joys of CSS. Here, buy yourself a mug - zazzle.co.uk/css_is_awesome_mug-168716435071981928 – Pokeberry

it works, but the terrible side effect is that when a <li> occupies more than one line (user shrinks browser width) the new line ends up beneath the dot (number for <ol>) instead of staying aligned to the previous line. – Sweeten

For the line break issue, you can set left-margin of li to 1em instead of changing the list-style-position of ul to inside – Materiality

Answer 2

list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.

Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

Rosa

Answer 3

You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.

Try adding some padding/margins to your list items (LI element).

Housum

This is generally the best course of action to follow. It also will maintain the indents of list items, which will make multiple line text items look tidier. – Alegar

Answer 4

Are you floating your List items to the left or right? If so then the following will solve your problem.

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>

Craddock

You would use this trick if your div does not have the same height as your ul and li's. You would need to use this trick when using floats on the ul or li elements. – Housum

Your right, but the question was pretty vague, so i gave it my best shot. – Craddock

This came in handy 5 years later so here's the first upvote on it :) – Nosy

Answer 5

For some cases, using two divs can help.

<div class="container">
  <div style="margin: 3%">
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </div>
</div>

Retrieve

Answer 6

This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.

Downall

That removes the bullet items, not sure if that is what he wanted, or if he wanted them to appear within the container. – Claimant

By removing everything he can set exactly what he wants. w3schools.com/CSS/css_reference.asp#list – Downall

Answer 7

if using float property on list make sure you only add the style the the selected list and not all list elements on the page.

Coprology

Welcome to Stackoverflow! Can you be more verbose? (if no, you could post it as a comment...) – Kilowatthour