Question

I am building a content area that is going to go on the bottom of an article page featuring a top ten list of items. The content in the list-items is an image with a caption, and a paragraph of text. The list item backgrounds will alternate between white and grey.

The Image and caption need to be floated left, so I have wrapped them in a div named .col, and floated the div left. However, no matter how I modify my CSS, the list-items will not inherit the height of the .col with the image ad caption.

I cannot do a fixed height for the list-items, because the content is going to be pulled in dynamically, and needs to scale with it. I feel like I have tried every alteration to get this puppy to work, and none of my edits will take, so I figured I would post here to query some assistance.

My HTML:

               <ul class="bestOf">
                    <li class="dark">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                    <div class="clearfix"></div>
                    <li class="light">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                    <div class="clearfix"></div>
                    <li class="dark">
                        <div class="col">
                            <img src="../images/article/1.png" />
                            <div class="clearfix"></div>
                            <p class="caption">Sinead O’Connor Gets Married gretvh in Pink Cadillac</p>
                        </div>
                        <p>2012 Ford Mustang Boss 302: A few mags have called it the best Mustang ever, and it’s hard to disagree. I know I’d choose this over a Shelby GT500, despite the latter’s more powerful engine. The Boss is a track car for the street, or a street car for the track. It doesn’t matter which. It behaves itself in traffic, turns into a beast when pushed, and has a glorious soundtrack. </p>
                    </li>
                </ul>
                <div class="hr"></div>

My CSS:

article ul.bestOf {
    display:block;
    position:relative;
    width:600px;
    height:auto;
}
article ul.bestOf li.light, article ul.bestOf li.dark {
    display:block;
    position:relative;
    width:600px;
    height:100%;
    padding:5px;
    margin:5px 0 5px -40px;
    border:1px solid #eee;  
}
article ul.bestOf li.light {
    background:fff;
}
article ul.bestOf li.dark {
    background:#eaeaea; 
}
article ul.bestOf .col {
    display:block;
    position:relative;
    width:200px;
    height:auto;
    float:left;
}
article ul.bestOf .col img {
    display:block;
    width:186px;
    height:124px;
    float:left; 
    padding:0 10px 0 0;
}
article ul.bestOf li .col .caption {
    display:block;
    position:relative;
    width:200px;
    height:auto;
}
article .bestOf li p {
    display:block;
    margin:3px 0 0 0;
}

You can see a working demo of the page on my web server.

Answer 1

You’re using clearfix slightly wrong (this one).

You don’t do this:

<li class="element-that-i-want-to-contain-floats"></li>
<div class="clearfix"></div>

You do this instead:

<li class="clearfix"></li>

For the avoidance of any doubt, your HTML should look like this:

<li class="clearfix dark"> .. </li>
<li class="clearfix light"> .. </li>
<li class="clearfix dark"> .. </li>