Make Two div’s Same height Using jQuery and CSS

Make Two div’s Same height Using jQuery and CSS. Some cases we may need to create two divisions with different its content. but it may not be equal with its height due its list of elements. We can set the size as maximum one’s height for the both divisions.  Let’s begin with CSS than more to jQuery.

CSS:

create two divs like the following one.

<div class="row">
    <div class="col left-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="col right-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>

and our css will be like this

.row {
    display: table;
}
.col {
    display: table-cell;
    width: 50%;    
    padding: 1em;
    border: 1px solid grey;
}

That’s it with css. but in some browsers its not working nice sometimes its not feeling good at here.  so we have another old method. you can use this too.

  <style type="text/css">
    row {
      overflow: hidden;
      width: 100%;
    }
    .left-col {
      float: left;
      width: 45%;
      background-color: orange;
	  padding:1%;
      padding-bottom: 500em;
      margin-bottom: -500em;
	 
    }
    .right-col {
      float: left;
      width: 45%;
      margin-right: -1px; /* Thank you IE */
      border-left: 1px solid black;
      background-color: red;  padding:1%;
      padding-bottom: 500em;
      margin-bottom: -500em;
    }
</style>

And also we have jQuery method, This is fine to go.

jQuery:

its simple js code to work it better.  Here is it.

 $(document).ready(function() {
        var height = Math.max($(".left-col").height(), $(".right-col").height());
        $(".left-col").height(height);
        $(".right-col").height(height);
});

If you have doubt or problem with the code drop your comments below.