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?

Answer 1

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

ul {    list-style-position: inside; } 

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; }