ul with background image and left floated li items

Question

I have a ul list with background image

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: url("../images/columns_sep_thumbs.png") repeat-y 50% 0;
}

With the following style for li

li {
    float: left;
    width: 220px;
    margin: 0;
    padding: 20px 15px;
    list-style: none;
    text-align: center;
}

the image disappears when li items float left, any suggestions?

<ul>
        <li>
            content1
        </li>
        <li>
            content2
        </li>
        <li>
            content3
        </li>
    </ul>

Try adding `li:after { content:''; display:block; clear:both; }` — display-name-is-missing, Jun 02 '14 at 20:04
this should help you: http://stackoverflow.com/questions/2062134/why-do-my-image-background-disappear-on-float-left — Tadas Davidsonas, Jun 02 '14 at 20:22

score 2 · Accepted Answer · answered Jun 02 '14 at 20:04

2

Add clearfix pseudo element to the ul

ul:after {
    content: "";
    clear: both;        
    display: table;
}

answered Jun 02 '14 at 20:04

Hybrid

128
4

ul with background image and left floated li items

1 Answers1