Home/ Questions/Q 7832971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T12:30:45+00:00

As the title says, I need two divs to be equally high. They should

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0