CODEWITHSUNDEEP
htmlcss
dragy
dragy

Reputation: 187

Expand parent div height and the height of the other child div to height of greater child div

I have four divs on my asp.net page, div7_1(parent), div4_1 and div11_1 and div6_1 as child divs. This is the situation:

html 

<div id="div7_1">
   <div id="div4_1">                    
   </div>
   <div id="div11_1" runat="server">                    
   </div>
   <div id="div6_1">
   </div>               
</div>

css

#div4_1{display:table-cell; width:215px; min-height: 450px; top: 0px; float: left; background-color: #cc9933; text-align: center; border: 2px solid #999;}
#div6_1{display:table-cell; width: 185px; min-height: 450px; float: right; top: 0px; right: 0px; background-color: #cc9933; border: 1px solid #999;}
#div7_1{ position: relative; overflow: hidden; display: table; width: 1200px; min-height: 450px; top: 5px; left: 0px; padding-top: 0px;}
#div11_1{display:table-cell; float: left; padding-left: 5px; margin-left: 5px; width: 65%; min-height: 450px; top: 0px; left: 0px; border: 3px solid #999;}

I need to expand parent div height to height of child div with greatest height and expand the other child divs to that height. How can I do this? Probably I have some redundant lines in css, please correct me.

Thanks.

Upvotes: 1

Views: 286

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

Not sure why you are floating either of the divs but just using display:table-cell on both seems to achieve your stated requirement

JSfiddle

CSS

#div7{position: relative; 
    overflow: hidden; 
    display: table; 
    min-height: 450px; 
    top: 5px; 
    left: 0px; 
    padding-top: 0px;}
#div4{display:table-cell; 
    width: 245px; 
    background-color: #cc9933; 
    text-align: center;
    height:150px;
}

#div11{
    display: table-cell;
    position: relative;     
    padding-left: 5px; 
    margin-left: 5px; 
    width: 57%; 
    background-color: yellow;
}

Upvotes: 2

Related Questions