Make Two div's Same height Using jQuery and CSS
X

Congrats, You are Subscribed to Receive Updates.

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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts