Two divs with dynamic height equally high

Question

As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:

.portfolioleft{
    float:left;
    width:189px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioleft img{
    border-radius: 10px;
}
.portfolioright{
    float:right;
    width:500px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioright a{
    color:#FFFFFF;
}

and the html for the divs is:

<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear">&nbsp;</div>

The answer to this question might help you http://stackoverflow.com/a/8741070/681807 (check the edit) — My Head Hurts, Apr 19 '12 at 19:05
Duplicate of http://stackoverflow.com/questions/9309487/auto-div-height-depend-on-another-one/9310329#9310329 — Tarun, Apr 20 '12 at 07:30

score 1 · Accepted Answer · answered Apr 19 '12 at 19:11

CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

score 0 · Answer 2 · answered Apr 19 '12 at 18:51

Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:

<div class="portfolio">
  <div class="portfolioleft">...</div>
  <div class="portfolioright">...</div>
</div>

.portfolio {
  position: relative;
  background: white;
}

.portfolio .portfolioleft {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #436FAC;
}

.portfolio .portfolioright {
  margin-left: 200px;
}

If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.

score 0 · Answer 3 · answered Apr 20 '12 at 07:27

0

cell properties in your left right div

i checked your code and replace the float into display table-cell

you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/

answered Apr 20 '12 at 07:27

Rohit Azad Malik

31,410
17
69
97

Two divs with dynamic height equally high

3 Answers3