Clearing floating elements rows

works ie7+, firefox, chrome, safari, opera

HTML

<ul>
    <li class="col1">1 test</li>
    <li class="col2">2 test testtest testtest test</li>
    <li class="col3">3 test</li>
    <li class="col1">4 test</li>
    <li class="col2">5 test</li>
    <li class="col3">6 test</li>
    <li class="col1">7 test</li>
</ul>

CSS

/* works ie7+, firefox, chrome, safari, opera */

ul {
    width: 600px;
}

li {     
    background: #f3f3f3;
    margin: 0 0 3px;
    width: 100px;
    float:left;
}

.col1 {
    clear: left;
}

.col3 {       
    *float:none; /* targets ie7, ie6 */
}

JavaScript

/* clearing floating elements rows */