Automatically match height on all DIV containers, based on 1 container [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't know if I formulated my question correctly, so if I didn't I apologize. English isn't my native language.
Can someone give explain and give me an example to achieve the following; I want to have 3 container DIVs (A, B & C). If content is added to container A, the height of containers B & C should automatically match container A.
Now for the 2nd issue; for containers B & C I want to display images. Example (now the problem starts explaining); if container A goes past 100px in height container B displays two images (both 40px in height) and container C will display a single 90px image (in height). If container A goes past 200px more images will show up in containers B & C.
I tried to do this in the past, but failed in several ways. Often I could manage to get the DIV's to match in height, but images looked cut-off. In the end I gave up, because I lack the knowledge and skills to find a solution for this.
Once again I apologize if this doesn't make sense, but it's kinda hard to explain something, when English isn't your native language. So if it's not understandable, just ignore me completely. Just wanted to see if someone understand what I am trying to achieve here. Thank you.
//follow-up
Sam's code for using flex actually worked for the first part. Many thanks for that. I tried it out, though I had a glitch first (caused by using bottom-padding), it works great.
Now for the 2nd part; other than images I am also using text. The longer container A gets, the more stuff (text and images) should be displayed in container C (depending on the height on container A). So the contents in container C should by dynamic (depending on A)? I don't know if it's the right term.
I will show you an example of what I am currently doing. I currently have only 2 columns / DIVs (ignoring the 3rd for the time being, while testing). In container A there is a form. Depending on what options you select on the form, in grows in size (= height) obviously. Now thanks to Sam, the 2nd column has the same height as the first.
Now when you progress on the form it will grow in height, the same goes for the 2nd column, however it has empty space, I want that empty space filled up with text and a few images I created. So the amount of empty space is reduced to a minimal.
So in short; depending on contents in container A, container B should start showing the text and images I entered.
I hope this explains it a bit better?
Thank you once again in advance.

Answer 1

For the equal heights issue you could try using flexbox as an easy solution. Check out Can I Use to see if it's available for the browsers you intend to use. Here is an example to show you how it's used. Try adding and removing text to the first col to see the other cols changing their height according to it.
I'm afraid I do not understand the second issue. But maybe this is pointing you in the right direction.
html, body {
height: 100%;
width: 100%;
}
.wrap {
display: flex;
}
.col {
width: 50px;
padding: 10px;
}
.col.odd {
background: red;
}
.col.even {
background: lime;
}
<div>
<h1>Equal height with flexbox</h1>
<div class="wrap">
<div class="col odd">
blub <br>
test <br>
blub <br>
test
</div>
<div class="col even">blub</div>
<div class="col odd">blub</div>
</div>
</div>