CODEWITHSUNDEEP
htmlcss
user3259283
user3259283

Reputation: 95

Keeping two columns the same height with CSS

I have two columns within a container. They both have dynamic heights, and different color backgrounds. No matter the content, I want both columns to always be size of the taller one. How can I achieve this with css?

HTML:

<div id="profile-bottom">
    <div id="bottom-left">
    </div>
    <div id="bottom-right">
    </div>
</div>

I tried using display: table and table-cell, but I can't seem to get it to work.

CSS:

#profile-bottom {
    display: table;
    position: relative;
    width: 450px;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px 0px 4px 4px;
    overflow: hidden;
    z-index: 10;
}

 #bottom-left {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 95px 20px 20px 20px;
    height: auto;
    width: 150px;
    box-shadow: rgba(0, 0, 0, 0.147059) 0px 1px 8px 0px;
    background-color: #fff;
    z-index: 50;
}

#bottom-right {
    display: table-cell;
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 20px 20px;
    height: auto;
    min-height: 96px;
    width: 220px;
    background-color: #f5f5f5;
    z-index: 10;
}

Upvotes: 2

Views: 73

Answers (1)

Yaniv Efraim
Yaniv Efraim

Reputation: 6711

Here you go: http://jsfiddle.net/ELKuf/

<div class="layout">
    <div class="columns-container">
        <div class="column">dasdas das das dsa kdas kdhsajk dhkas dhkjas kdsa dsa dsa as das dsa dsa das das das das dsa d asdsa
</div>
        <div class="column"> dsa dsa dsa das dsa</div>
    </div>
</div>


layout {
    display: table;
}

.layout .columns-container {
    display: table-row;
}

.layout .columns-container .column {
    display: table-cell;
    border: 1px solid black;
    width: 100px;
}

Upvotes: 1

Related Questions