Why Do My List Item Bullets Overlap Floating Elements

Why do my list item bullets overlap floating elements

I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.

Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.

Why do negative margin and float applied elements overlap?

Let's start by adding the properties one by one and see what is happening.

Intially we have this code with no margin applied and only float elements:

.container {    overflow: hidden;    background:yellow;}
main {    float: left;    width: 100%;    background: red;}
.main-inner {    background: blue;}
.sidebar {    float: right;    width: 340px;    background: green;}

<div class="container">    <main>        <div class="main-inner">            <p class="main-title">Main</p>        </div>    </main>    <aside class="sidebar">        <div class="sidebar-inner">            sidebar        </div>    </aside></div>

Floating list elements to right instead of down

Using the display: inline style on your li element will get your list flowing horizontally. Further styling (such as padding and margin) can let you manipulate the space between the items, and list-style-type will even let you customize the appearance of the bullet.

I'm not aware of any simple means to specify on which item the list will break to a newline, though. It should simply wrap when it reaches the edge of its container. (You could specify the width of the list, although that will change which item the list breaks on depending on the user's font size.)

Why Do My List Item Bullets Overlap Floating Elements