CODEWITHSUNDEEP
javascriptjqueryhtmlcss
manespgav
manespgav

Reputation: 177

Apply same height on elements in 2 columns of articles inside a div

I want to apply same height on elements in 2 columns of articles inside a div in my live blog.

Currently the output is something like below:

introducir la descripción de la imagen aquí

I want the output to be something like below:

introducir la descripción de la imagen aquí

What I do to show this is adding height to article css, but this one only works if you add the height in px. I am trying to find a "responsive" way to do it.

------ EDIT----

Example code:

.izq{
  float: left;
	margin-left: 0px;
  border: 1px solid #000;
  width: 48%;
  clear: both;
	margin-left: 0;
  border: 1px solid;
}
.der{
  float: right;
	margin-right: 2.564102564102564%;
  width: 48%;
  border: 1px solid;
}
<html>
  <head>
  </head>
  <body>
    <div class="cotainer">
      <article class="izq">art1</article>
      <article class="der">art2<p>contiene 1 parrafo</article>
      <article class="izq">art3 mas texto <p> otra parrafo <p> otro parrafo</article>
      <article class="der">art4<br> mas texto<br> mas texto</article>
      <article class="izq">art5 <p> un par de parrafos </article>
      <article class="der">art6 <p> articulo 6 contiene <p> 4 parrafos en total<p> contando este</article>
    </div>
  </body>
</html>

Upvotes: 1

Views: 112

Answers (3)

Suhaib Janjua
Suhaib Janjua

Reputation: 3572

The simplest solution for you is to include the jQuery library to your project and use the following code that will run when the document is loaded properly and will do the trick for you.

jQuery library src:

https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

Code that you need to execute once the document is loaded properly.

$(document).ready(function(){

    var maxHeight=0;

    $('article.one-half').each(function(){
        if($(this).height()>maxHeight) maxHeight = $(this).height();
    });

    $('article.one-half').each(function(){
        $(this).height(maxHeight);
    });

});

You can test the above solution on your live blog

All you have to do is to open your blog in Google Chrome and go to the Developer Tools by pressing F12 or you can right click and select inspect element from the context menu and then select Console tab.

Once you are in console, all you have to do is to include the jQuery temporarily to your blog using the following code:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

Once you have successfully included the jQuery to your page, all you have to do is to paste the following code and press Enter. You will get the desire result what you are looking for.

P.S. this is just for testing purpose. If you want to implement it, you have to include the jQuery library to your blog first and then use this script.

As you have edited your question and added an example. So if I use your example, It would be something like this.

$(document).ready(function(){

    var maxHeight=0;

    $('article.izq,article.der').each(function(){
        if($(this).height()>maxHeight) maxHeight = $(this).height();
    });

    $('article.izq,article.der').each(function(){
        $(this).height(maxHeight);
    });

});
.izq {
  float: left;
  margin-left: 0px;
  border: 1px solid #000;
  width: 48%;
  clear: both;
  margin-left: 0;
  border: 1px solid;
}

.der {
  float: right;
  margin-right: 2.564102564102564%;
  width: 48%;
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div class="cotainer">
    <article class="izq">art1</article>
    <article class="der">art2
      <p>contiene 1 parrafo</article>
    <article class="izq">art3 mas texto
      <p> otra parrafo
        <p> otro parrafo</article>
    <article class="der">art4<br> mas texto<br> mas texto</article>
    <article class="izq">art5
      <p> un par de parrafos </article>
    <article class="der">art6
      <p> articulo 6 contiene
        <p> 4 parrafos en total
          <p> contando este</article>
  </div>
</body>

</html>

Upvotes: 1

syp_dino
syp_dino

Reputation: 395

I understand that is a problem with different height of rows?

I propose use bootstrap, and you get that for free. 

<div class="row"></div>...

Here is example

Upvotes: 1

Karam Jabareen
Karam Jabareen

Reputation: 301

You can set the two articles in one row and fit the article to the max height.

<div class="row">
    <article id=1.......
    <article id=2....
</div>

lock for our implementation on bootstrap row.

Upvotes: 1

Related Questions