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

Question

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:

I want the output to be something like below:

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>

Check this out http://stackoverflow.com/a/10222806/6003350 – Rakesh V Apr 13 '17 at 13:03 — Rakesh V, Apr 13 '17 at 13:03
could you please put your codes here on your post? – Grinex Apr 13 '17 at 13:03 — Grinex, Apr 13 '17 at 13:03

score 1 · Answer 1 · answered Apr 13 '17 at 13:32

1

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.

answered Apr 13 '17 at 13:32

Karam Jabareen

301
1
12

Suhaib Janjua · Accepted Answer · 2017-04-13T14:21:53.447

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>

Thanks for the answer, but I can't solve it. I am using firefox, and adding your code to js console, nothing is appearing. — manespgav, Apr 13 '17 at 14:12
@manespgav it was just for testing. if you put this code in your application it will definitely work. Firefox doesn't allow runtime addition of libraries that's why developers uses the Developer Tools in Chrome now a days... — Suhaib Janjua, Apr 13 '17 at 14:13
You didn't provide the code and I can't change your code from here. So all I can do is to provide you the solution that genuinely works in all browsers (You can check it in any standard browser) it will surely work. If you can't paste your code here, then you can use this code and paste it in your application it will definitely work without even a single problem. :) — Suhaib Janjua, Apr 13 '17 at 14:15
@manespgav the reason that I mentioned the google chrome is just for testing purpose in case if you want to check it first by sitting outside and temporarily adds the code from the console. But if you adds it into your code, it will work without a problem. — Suhaib Janjua, Apr 13 '17 at 14:16
I just tested with google chrome, but no I have no changes :s. Sorry mate if I have doing something wrong :s — manespgav, Apr 13 '17 at 14:19
Sorry, Yes, your code works perfectly. Thanks!!. I Will try to find a solution with Css, If I no found it, i will use your Js code! Thanks so much! — manespgav, Apr 13 '17 at 14:20

score 1 · Answer 3 · answered Apr 13 '17 at 14:02

1

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

answered Apr 13 '17 at 14:02

syp_dino

395
3
10

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

3 Answers3