How to Achieve Equal Height Divs (Positioned Side by Side) With HTML/CSS

How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

You could use jQuery, but there are better ways to do this.

This sort of question comes up a lot and there are generally 3 answers...

1. Use CSS

This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).

2. Use Tables

This seems to work great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, and you should too.

3. Use jQuery / JavaScript

This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

make variable number of divs positioned side by side of equal height with HTML/CSS (responsive design)?

You've ruled out the only two possible ways to do what you're asking for with pure CSS (at this point in time -- any newer CSS techniques would not work in your desired browsers). So the answer is no, this cannot be done.

Making two side by side div's heights equal

try this:

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Example:
http://jsfiddle.net/VdfJh/

and check this link:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Equal height columns in css except one column

You can make the top ribbon to be absolute position and rely on flexbox for the remaining to have equal height:

* { box-sizing:border-box;}
body {  background-color: #a3d5d3;}.container {  display: flex;}
.some {  margin-top:50px;  margin-right: 30px;  position:relative;}
.recommended {  position:absolute;  background-color: yellow;  left:0px;  right:0px;  height: 40px;  top:-40px;  padding: 5px 10px;}
.one {  background-color: transparent;}
.box {  width: 200px;  height:100%;  background-color: green;  padding: 10px;}

<div class="container">
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar      <br> foo bar      <br> foo  bar      <br>    </div>  </div>
  <div class="some">    <div class="recommended">Recommended Card</div>    <div class="box">      foo<br>    </div>  </div>
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar    </div>  </div>
</div>

Positioning two div on the same height and position

Set the value of one (or both) of your div's to float: left. This causes any content to wrap around the object and the object sits on the left of the content.

#div1{
    float: left
}

http://www.w3schools.com/cssref/pr_class_float.asp

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {  overflow: hidden;      width: 100%;}#left-col {  float: left;  width: 50%;  background-color: orange;  padding-bottom: 500em;  margin-bottom: -500em;}#right-col {  float: left;  width: 50%;  margin-right: -1px; /* Thank you IE */  border-left: 1px solid black;  background-color: red;  padding-bottom: 500em;  margin-bottom: -500em;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>  <div id="container">    <div id="left-col">      <p>Test content</p>      <p>longer</p>    </div>    <div id="right-col">      <p>Test content</p>    </div>  </div></body>