three columns always the same size with dynamic content

Question

I have three div with dynamic content, and I need that the height of three div are always the same. The code of three div are:

<div class="boxcontent3">
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            conten1
        </div>
    </div>
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            content2
        </div>
    </div>
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            content3
        </div>
    </div>
</div>

and the css style:

.boxcontent3 {
    display: inline-block; 
    width: 100%;
}
.whitebox3 {
    float:left;
    background-color: white;
    border: 1px solid #dfe0e2; 
    -webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 6px; /* FF1-3.6 */
    border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 32%;
    height: 100%;
}

thanks

Check this. http://stackoverflow.com/questions/8295680/html-css-equal-div-height — anuj_io, Apr 25 '12 at 09:57

score 1 · Accepted Answer · answered Apr 25 '12 at 10:18

Hey i think you used display table properties as like this

Css

.boxcontent3{
   display: table; 
   width: 100%;
}
.whitebox3{
display:table-cell;
background-color: white;
border: 1px solid #dfe0e2; 
-webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 6px; /* FF1-3.6 */
border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
width: 32%;
height: 100%;
}

Live demo http://jsfiddle.net/dNmLh/

How can I achieve the same in my question here: http://stackoverflow.com/questions/26365093/how-to-ensure-three-div-are-the-same-height-regardless-of-content — SearchForKnowledge, Oct 14 '14 at 15:57

three columns always the same size with dynamic content

1 Answers1