Equal height double column using css

Question

#DIV_1 {
    bottom: -10px;
    height: 176px;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: left;
    top: 10px;
    width: 379px;
    perspective-origin: 189.5px 88px;
    transform-origin: 189.5px 88px;
    background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px -5px;
    overflow: hidden;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    float: left;
    height: 77px;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    border-right: 5px solid rgb(255, 255, 255);
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_2*/

#DIV_3 {
    box-sizing: border-box;
    float: left;
    height: 77px;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_3*/

#DIV_4 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: left;
    height: 99px;
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 49.5px;
    transform-origin: 94.75px 49.5px;
    background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 5px solid rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_4*/

#DIV_5 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: left;
    height: 82px;
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 41px;
    transform-origin: 94.75px 41px;
    background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_5*/

<div id="DIV_1">
 <div id="DIV_2">
  Ben Franklin
 </div>
 <div id="DIV_3">
  Thomas Jefferson
 </div>
 <div id="DIV_4">
  George Washington
 </div>
 <div id="DIV_5">
  Abraham Lincoln
 </div>
</div>

I have 2 column that its content might have different length, thus it will have multiple lines, so how do I ensure that the least line of content have the equal height? I can't use fixed height like height:100px; because the length of the content might be more than that.

this is the oldest css question of all... have you tried searching for it before posting? — Hugo Silva, Jul 05 '16 at 02:33
https://stackoverflow.com/questions/2114757/css-equal-height-columns?rq=1 https://stackoverflow.com/questions/3936587/two-equal-columns-in-css?lq=1 https://stackoverflow.com/questions/17410057/how-to-make-2-horizontal-divs-the-same-height?lq=1 https://stackoverflow.com/questions/33813871/equal-height-columns-with-css?rq=1 — Hugo Silva, Jul 05 '16 at 02:35
Try searching for an answer, flexbox can achieve what you are looking for... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — matthewelsom, Jul 05 '16 at 02:36
Using table, @HugoSilva already provided that answer... http://jsfiddle.net/UT7ZD/ — matthewelsom, Jul 05 '16 at 03:24

score 0 · Answer 1 · answered Jul 05 '16 at 02:34

You can use flexbox to achieve equal heights. This is set on the outer wrapper div:

#DIV_1 {
  display: flex;
  flex-wrap: wrap;
}

You'll also need to remove the fixed heights and float on the inner divs. If you also want the content in the inner divs to be vertically centered you can make then display:

#DIV_2,
#DIV_3,
#DIV_4,
#DIV_5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#DIV_1 {
    bottom: -10px;
    display: flex;
    flex-wrap: wrap;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: left;
    top: 10px;
    width: 379px;
    perspective-origin: 189.5px 88px;
    transform-origin: 189.5px 88px;
    background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px -5px;
    overflow: hidden;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    border-right: 5px solid rgb(255, 255, 255);
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_2*/

#DIV_3 {
    box-sizing: border-box;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_3*/

#DIV_4 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 49.5px;
    transform-origin: 94.75px 49.5px;
    background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 5px solid rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_4*/

#DIV_5 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 41px;
    transform-origin: 94.75px 41px;
    background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_5*/

<div id="DIV_1">
 <div id="DIV_2">
  Ben Franklin
 </div>
 <div id="DIV_3">
  Thomas Jefferson
 </div>
 <div id="DIV_4">
  George Washington
 </div>
 <div id="DIV_5">
  Abraham Lincoln
 </div>
</div>

Equal height double column using css

1 Answers1