Question

I have a div which contains 2 child elements. The 1st div have content added dynamically via jQuery on user interaction. The 2nd is a text area which have a problem not getting contained within its parent div.

<div class="organizer_email_address">[e-mail]</div> is added via jQuery after the user selects some options and click on a button.

I tried the clearfix method but it does not cause the parent div to contain the 2nd child completely. Please have a look and see what went wrong, thanks!

HTML

<div id="organizer_email_container">
    <div id="organizer_email_addresses_container">
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
        <div class="organizer_email_address">[e-mail]</div>
    </div>
    <textarea id="organizer_email_template" class="clearfix">Some text </textarea>
</div>

CSS

#organizer_email_container {
    width: 800px;
    min-height: 130px;
    height: auto;
    margin: 25px auto;
    padding: 25px;
    background: #FAFAFA;    
    display: none;
}

#organizer_email_template {
    width: 500px;
    height: 120px;
    background: #F6F6F6;
    color: #666;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #B9B9B9;
    border-top-color: #A4A4A4;
    -moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    float: left;
    clear: both;
}

.organizer_email_address {
    background-color: #F3F7FD;
    border: solid 1px #BBD8FB;
    vertical-align: middle;
    font-size: 12px;
    color: #2A2A2A;
    padding: 2px 5px 2px 7px;
    margin: 1px;
    float: left;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 1

Why do you have a display:none on the #organizer_email_container?

Looks fine to me: http://cl.ly/1c361c0G3r0G1U0p3J0P

–

You should put your class="clearfix" in the parent container, not as a class of your text area.