CODEWITHSUNDEEP
javascriptjquerycss
Nyxynyx
Nyxynyx

Reputation: 63657

Expanding parent div's height to fit floated & unfloated child divs

I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.

Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.

How can I make the parent div #modal_share expand its height to contain all the visible child divs?

JSFiddle: http://jsfiddle.net/TEmGc/

CSS

#modal_share {
    width: 565px;
    height: 400px;
    position: relative;
    background: whiteSmoke;
    padding-top: 10px;      
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 16px #222;
    -moz-box-shadow: 0px 3px 16px #222;
    box-shadow: 0px 3px 16px #222;
    display: none;  
}

.modal_big_hline {
    width: 100%;
    height: 1px;
    margin-top: 25px;
    border-top: 1px solid #CCC;
    float: left;
}

.modal_error_msg {
    width: auto;
    height: 15px;
    padding: 15px 25px;
    margin: 0px 25px;
    font-size: 12px;
    color: #B79000;
    border: 1px solid #E7BD72;
    background: #FFF3A3;
    clear: both;
    display: none;
}


#modal_big_button_container {
    height: 14px;
    width: auto;
    margin: 10px 25px 0px 25px;
    clear: both;
}

HTML Structure

<div id="#modal_share">
    <div class="modal_error_msg"></div>
    <div class="modal_big_hline"></div>
    <div id="modal_big_button_container"></div>
</div>

Upvotes: 2

Views: 5714

Answers (2)

Richard A
Richard A

Reputation: 2100

Set the modal_share's height to auto:

#modal_share {
    width: 565px;
    height: auto; //<----
    position: relative;
    background: whiteSmoke;
    padding-top: 10px;        
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 16px #222;
    -moz-box-shadow: 0px 3px 16px #222;
    box-shadow: 0px 3px 16px #222; 
}

See Feedle http://jsfiddle.net/TEmGc/1/

Upvotes: 1

Kiran
Kiran

Reputation: 20313

For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.

Upvotes: 1

Related Questions