Div take the height of another div even when the later is smaller

Question

I'm developing a web page and in it I have a list of news, divs with 2 other divs inside, an image on the left, and the title, date and the first 30 words of the news on the right. I want the image div to take the height of the text div, no matter what the size of the image is. The images usually don't have the same size/aspect ratio. I prefer to avoid fixed dimensions, since I want it to be responsive. By the way I'm using Bootstrap 3.3.7.

Here an example of what I have so far.

This is my HTML

<!-- First News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 1</h4>
    <p>Nov 6, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Second News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4  news-img-div">
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 2</h4>
    <p>Nov 5, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Third News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 3</h4>
    <p>Nov 4, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>

And this is my CSS (for visualization purposes)

.news-img-div {
  background-color: red;
}
.news-text-div {
  background-color:aqua;
}

I set a background color to the divs for better visualization. You might need to expand the result tab so the image and the text stay in the same row.

Is there a way to accomplish using only CSS? Otherwise I welcome solutions with js.

see this : https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height , https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height — Balwant, Nov 14 '17 at 16:15
@Balwant. This is not the solution I'm looking for, since the the smaller div takes the height of the bigger one. I want the image div to always take the height of the text div. Thanks for your input. — Jordan Mora, Nov 15 '17 at 14:07

Ammar Alyousfi · Accepted Answer · 2017-11-15T04:20:55.143

On the div that contains the two divs (which has container-fluid class), use

display: flex;

This makes the image div take the same height as the other div, which is the same height of the container.

Here is the modified version of your code: jsFiddle

Edit

It turns out that the solution above is not what you want.

What I want is the image div to always take the height of the text div.

Here is a solution in pure JavaScript:

function adjustHeight() {
  var containers = document.querySelectorAll(".news-card");
  Array.prototype.forEach.call(containers, function(con) {
    var imgDiv = con.getElementsByClassName("news-img-cont")[0];
    var textDiv = con.getElementsByClassName("news-text-cont")[0];
    var img = imgDiv.getElementsByClassName("news-img")[0];
    var textDivHeight = textDiv.offsetHeight;
    imgDiv.style.height = String(textDivHeight) + 'px';
    img.style.maxHeight = String(textDivHeight) + 'px';
  });
}
adjustHeight();
var sch = false;
window.addEventListener("resize", function() {
  if (!sch) {
    sch = true;
    setTimeout(function() {
      sch = false;
      adjustHeight();
    }, 500);
  }
});

.news-img-cont {
  background-color: red;
}

.news-text-cont {
  background-color: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- First News -->
<div class="container-fluid panel panel-default news-card">
  <div class="col-xs-12 col-sm-4 news-img-cont">
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive news-img">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-cont">
    <h4>News Title 1</h4>
    <p>Nov 6, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Second News -->
<div class="container-fluid panel panel-default news-card">
  <div class="col-xs-12 col-sm-4 news-img-cont">
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive news-img">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-cont">
    <h4>News Title 2</h4>
    <p>Nov 5, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Third News -->
<div class="container-fluid panel panel-default news-card">
  <div class="col-xs-12 col-sm-4 news-img-cont">
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive news-img">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-cont">
    <h4>News Title 3</h4>
    <p>Nov 4, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>

In the code above, we get the height of each text div, then make the height of each corresponding image div equal to it.

The purpose of the last two lines:

var img = imgDiv.getElementsByClassName("news-img")[0];
img.style.maxHeight = String(textDivHeight) + 'px';

is to make images always contained in their divs. Without them, big images will go outside its container.

Edit 2

You said

Sorry but this doesn't solve my problem, because as you expand the screen the images get bigger and their parent div does not sitck to the height of the text div.

I've edited the code to solve this problem: The previous adjustment of height is now done by a function (adjustHeight). This function is called on page load, and whenever the page gets resized.

Since resizing the page fires a lot of events while resizing, and adjusting the height for each of those events may be not a good idea, a scheduling approach has been implemented to make the solution more efficient.

Thanks for replying, but this sets the div with the largest height as the common height. What I want is the image div to always take the height of the text div, because the images don't always have the same size. The text div height should always be the set height for the image div. — Jordan Mora, Nov 14 '17 at 16:58
@JordanM. I've edited my answer with a new solution. Please take a look.. — Ammar Alyousfi, Nov 14 '17 at 22:48
Sorry but this doesn't solve my problem, because as you expand the screen the images get bigger and their parent div does not sitck to the height of the text div. — Jordan Mora, Nov 14 '17 at 23:14
@JordanM. I've edited my answer to solve the problem you described in your comment.. — Ammar Alyousfi, Nov 15 '17 at 04:21
Perfect. This solves the height and resizing issue. Thanks man! — Jordan Mora, Nov 15 '17 at 14:43
It appears that @ammarx and I actually followed roughly the same path to solve your problem through Javascript and jQuery, respectively. — emshore, Nov 15 '17 at 16:37

emshore · Answer 2 · 2017-11-15T16:27:31.013

I see you tagged the post with jQuery, so here's one option for you...

http://jsfiddle.net/yLyv9fyx/3/

Or see below (NOTE: I believe the Script Error reported is caused by cross-domain script sourcing for bootstrap, though someone can correct me if this is inaccurate).

$(".news-img-div").each(function() {
  var textDivHeight = $(this).parent().find("div.news-text-div").height();
  $(this).height(textDivHeight);
  var imgHeight = $(this).find("img.img-responsive").height();
  if (imgHeight > textDivHeight) $(this).find("img.img-responsive").height(textDivHeight);
});

.news-img-div {
  background-color: red;
}

.news-text-div {
  background-color: aqua;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- First News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 1</h4>
    <p>Nov 6, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Second News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4  news-img-div">
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 2</h4>
    <p>Nov 5, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Third News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 3</h4>
    <p>Nov 4, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>

UPDATE:

This should be an improvement, but it looks like you already have a solution: http://jsfiddle.net/yLyv9fyx/5/

Javascript changed to:

function updateImgDiv() {
    $(".news-img-cont").each(function() {
        var textDivHeight = $(this).parent().find("div.news-text-cont").height();
        $(this).height(textDivHeight);
        var imgHeight = $(this).find("img.img-responsive").height();
        if (imgHeight>textDivHeight) $(this).find("img.img-responsive").height(textDivHeight); 
    });
}
updateImgDiv();
$( window ).resize(function() {
    updateImgDiv();
});

This is just what I was looking for. Thanks @emshore. But sometimes the images get out of the div and you need to refresh the page so they stay inside the div. Is there a chance you could show me how to fix that? — Jordan Mora, Nov 14 '17 at 23:04
Can you provide an example that demonstrates this or steps to reproduce this behavior? The script I provided adjusts the image div and the image itself when the image height is larger than its parent div, but I may not have accounted for all responsive scenarios. One thing to note is that there appears to be a change to the padding/spacing on the text div when the display is large, which gives the appearance that the image div is taller. I believe their heights are, in fact, the same, so if this isn't intentional, css probably needs to be modified. — emshore, Nov 14 '17 at 23:21
@JordanM. I would be happy to take a closer look if you can help me see what you're seeing. — emshore, Nov 14 '17 at 23:26
I took a look at the jsfiddle and when I expanded the result tab, the image (specifically the 2nd news) doesn't stay inside the div. But when I re-run the code the issue is fixed. I think it's a load issue or something. — Jordan Mora, Nov 14 '17 at 23:56
Ok, I'll see what I can figure out. I was testing more with the SO snippet and didn't run into that. — emshore, Nov 15 '17 at 00:03
I'm using Firefox. What I did is hard refresh the page and then expand the result tab. Hope this can help you. I used your code on my website and the images stay out of the div. Note that this happens sometimes, not always. — Jordan Mora, Nov 15 '17 at 00:10
@JordanM. See my update for an improved solution that accounts for your responsive design by running the same script each time the window is resized. It appears you already have an acceptable solution, but hopefully this helps to illustrate other ways the task can be accomplished. — emshore, Nov 15 '17 at 16:33

Div take the height of another div even when the later is smaller

2 Answers2

Edit

Edit 2