Clearing final solution

by oilvier

HTML

<div id="highlights"><ul>
    <li class="rounded">
                <span class="illus"><img alt="" src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg"></span>
                <h3>Clear sur Div</h3>
                <p>Vente maison type 1930 à Valenciennes secteur calme proche du Pont Jacob.<br>
Il s'agit d'une semi-mitoyenne...</p>
                  
                 <div class="price rounded">
                    <a class="rounded" href="/webimmono/www/public/annonce/annonces/view/id/20">En savoir +</a>
                     <span>95&nbsp;000,00&nbsp;€</span>
                 </div>
            </li>
    <li class="rounded">
                <span class="illus"><img alt="" src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg"></span>
                <h3>Clear sur Div</h3>
                <p>Vente maison type 1930 à Valenciennes secteur calme proche du Pont Jacob.<br>
Il s'agit d'une semi-mitoyenne...</p>
                  
                 <div class="price rounded">
                    <a class="rounded" href="/webimmono/www/public/annonce/annonces/view/id/20">En savoir +</a>
                     <span>95&nbsp;000,00&nbsp;€</span>
                 </div> 
        <div class="clear"></div>
            </li>
    <li class="rounded">
                <span class="illus"><img alt="" src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg"></span>
                <h3>Clear sur BR</h3>
                <p>Vente maison type 1930 à Valenciennes secteur calme proche du Pont Jacob.<br>
Il s'agit d'une semi-mitoyenne...</p>
                  
                 <div class="price rounded">
                    <a class="rounded" href="/webimmono/www/public/annonce/annonces/view/id/20">En savoir +</a>
                     <span>95&nbsp;000,00&nbsp;€</span>
                 </div> 
        <br class="clear" />
            </li>
    
    <li class="rounded cf">
                <span class="illus"><img alt=""...

CSS

#highlights ul {overflow:hidden; width:100%; font-family:Trebuchet Ms;}

#highlights li {border:3px solid #e8e8e8; padding:6px; width:313px; position:relative; margin:5px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; line-height:0;}
            #highlights .illus {position:relative; float:left; background:url(../images/bgd_shadow_illus.png) no-repeat right center; padding:0 9px 0 0; z-index:2; margin:0 7px 0 0;}
                #highlights .illus img {vertical-align:bottom; border-right:6px solid #FFFFFF;}
            #highlights h3 {color:#686e6e; font-size:16px; line-height:24px; text-transform:uppercase; font-family:myriad-pro-condensed-n7,myriad-pro-condensed,sans-serif; font-weight:700;}
            #highlights p {color:#686e6e; font-size:12px; line-height:14px; margin:0 0 30px;}
            #highlights .price {background:#f89d35; color:#FFFFFF; font-family:myriad-pro-condensed-n7,myriad-pro-condensed,sans-serif; font-weight:700; font-size:18px; line-height:24px; height:24px; width:313px; position:absolute; bottom:6px; right:6px; text-align:center; -webkit-border-radius:0 0 8px 0; -moz-border-radius:0 0 8px 0; border-radius:0 0 8px 0;}
                #highlights .price span {float:right; width:98px; text-align:center;}
                #highlights .price a {background:#dc6212; color:#FFFFFF; float:right; font-size:13px; display:inline-block; height:100%; position:relative; padding:0 6px 0 13px; -webkit-border-radius:0 0 8px 0; -moz-border-radius:0 0 8px 0; border-radius:0 0 8px 0;}
.clear { clear:both; line-height:0!important; height:0; font-size:0;}

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1; margin:0 0 1px;
}