Clearfix hack not enclosing inner divs with borders

Question

I have tried using the Clearfix class to enable a parent div to encapsulate all my inner divs. I am using a for-loop in the Django template language to render individual tweets with some sentiment analysis information (collapsed using the "details" tag). I would like the parent div to enclose all these tweet divs, so that the page does not become very long and unsightly. I would like the outer div to have a scrollbar, so that you can easily scroll through all the tweets in a reasonable, contained manner. I have tried using the suggested code below, but I am getting the same result - the parent div (signified by black border) is only surrounding the first inner tweet div. I have also tried 'overflow:hidden;' for the parent div, to no avail. I would appreciate any help or suggestions..Testing it on Chrome, also.

This is my CSS class for clearfix:

    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both;
        font-size: 0;
        content: " "; 
        visibility: hidden;
        overflow: auto;
    }
    .clearfix {
        display: inline-block; 
        border: black 2px solid;
    }
    /* Hides from IE-mac \*/
    * html .clearfix {
        height: 1%;
    }
    .clearfix {
        display: block;
    }
    /* End hide from IE-mac */

This is the relevant part of my results.html page using the Django template language..

<div class="clearfix">

{% for tweet in tweets %}
<summary><h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <p>Tweet: {{ tweet.tweet_text_actual }}</p></summary><details>
    <p>Created at: {{ tweet.created_at }}</p>
    <p>Geo: {{ tweet.tweet_geo }}</p>
    <p>User: {{ tweet.tweeter }}</p>
    <p>Language: {{ tweet.tweet_lang }}</p>
    <p>Place: {{ tweet.tweet_place }}</p>
    <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
    <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
    <p>Positive score: {{ tweet.pos_score }}</p>
    <p>Negative score: {{ tweet.neg_score }}</p>
    <p>Overall score: {{ tweet.overall_score }}</p>
    <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
    <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
    <p>Final processed word list:
    {% for item1, item2 in tweet.zipped_data %}
      ({{ item1 }} = {{ item2 }}),
    {% endfor %}
    </p>
    <p>print color: {{ tweet.tweet_color }}</p>
    <p>Dates: {{ tweet.date_format }}</p>

</details>
</div>
{% endfor %} 

</div>

Answer 1

You don't need a clearfix solution here. Correct the nesting with your markup and the rendering issues should go away:

{% for tweet in tweets %}
<div style="background-color: {{ tweet.tweet_color }}; border: #666699 dotted 6px; -moz-  border-radius: 15px; border-radius: 15px; margin: 5px;">
    <summary>
        <h3 style="text-align:left">Tweet #{{ tweet.tweet_no }}</h3>        
        <p>Tweet: {{ tweet.tweet_text_actual }}</p>
    </summary>
    <details>
        <p>Created at: {{ tweet.created_at }}</p>
        <p>Geo: {{ tweet.tweet_geo }}</p>
        <p>User: {{ tweet.tweeter }}</p>
        <p>Language: {{ tweet.tweet_lang }}</p>
        <p>Place: {{ tweet.tweet_place }}</p>
        <p>Predefined coordinates: {{ tweet.predefined_coors }}</p>
        <p>Sentiment score: <strong>{{ tweet.sentiment_score }}</strong></p>
        <p>Positive score: {{ tweet.pos_score }}</p>
        <p>Negative score: {{ tweet.neg_score }}</p>
        <p>Overall score: {{ tweet.overall_score }}</p>
        <p>Adjusted for exclamation marks? {{ tweet.adjustedExclamation }}</p>
        <p>Moderated by interrogatives present? {{ tweet.adjustedInterrogation }}</p>
        <p>Final processed word list:
            {% for item1, item2 in tweet.zipped_data %}
                ({{ item1 }} = {{ item2 }}),
            {% endfor %}
        </p>
        <p>print color: {{ tweet.tweet_color }}</p>
        <p>Dates: {{ tweet.date_format }}</p>
    </details>
</div>
{% endfor %}