Clearing floats of child elements

Clearing the float in a child element breaks the float of its container. You have to set overflow:auto or overflow:hidden on the parent of any element whose float you're clearing as explained here. http://stackoverflow.com/questions/7548091/clearing-inner-float. Also can't have margin-left: 170px; on entry-container, as this has the effect of shrinking it. http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float

by andfinally

HTML

<li class="clearfix">
           Update     <div class="author_photo" title="[ WP THE TITLE ]"> [ WP USERPHOTO ] </div>
                <div class="entry-container">
                    <h2>
                        <a href="#" rel="bookmark" title="Title"> [ WP THE TITLE ] </a>
                    </h2>
                    <ul class="entry-content clear">
                        <li class="entry-author-link">
                            [ WP AUTHOR POSTS LINK ]
                        </li>
                        <li class="entry-date">
                            [ WP THE DATE ]
                        </li>
                    </ul>
                    <span class="entry-excerpt">[ WP THE EXCERPT ]</span>
                </div>
            </li>

CSS

body {
    font-family:Arial, sans-serif;
    font-size:12px;
}

li {
    list-style:none;
}

.clear {
    clear:both;
}

.author_photo {
    width:150px;
    height:150px;
    display:block;
    padding-right:10px;
    float:left;
    background: gray;
}

.entry-container {
    background:#ffffe0;
    vertical-align:top;    
    overflow: auto;
    margin-left: 170px;
}

.entry-content {
    display:block;
    margin-bottom:10px;
    background:gray;
    border:1px solid gray;
    overflow: auto;
}

.entry-author-link {
    display:block;
    width:40%;
    float:left;
}

.entry-date {
    display:block;
    width:40%;
    float:right;
    text-align:right;
    background:#ddd;
}

.entry-excerpt {
    display: block;
    background: lavender;
}