the ul-li elements styling is not correct

Question

Hi I am trying to build a list (code shared at: http://jsfiddle.net/jLM4J/ ).

My question is that though the list elements should not be overlapping, why is my list overlapping the first item, where I am trying to display the user details.

Even if i replace the user li element with a separate div outside/inside ul(http://jsfiddle.net/yYEhS/1/), the ul list still keeps overlapping my element while it should not because my element is div which displays as a block.

Can anyone please help as this is screwing my mind up.

Answer 1

It's because of a float:left; in your user div declaration. Remove it like so, and it works:

.user-image {
    width: 30px;
    height: 30px;
    background: url('../../images/user.png') no-repeat center center;
    margin: 1px;
    border: 1px @border-style @border-color;
}

Without a design to look at, it's hard to know why you might have had that float: left there.

If you need it to align left to the PAGE, it needs to be outside of the ul.
If you want it to align left within the page, then assign text-align:left; to the li elements.