Sibling Divs Match Height in Container

.body {

  display: table;

}

.imgContainer,

.text {

  display: table-cell;

  vertical-align: top;

}

.imgContainer {

  position: relative;

  width: 40%;

  background-color: green;

}

img {

  position: absolute;

  height: 100%;

  width: 100%;

  border-radius: 100%;

}

.text {

  background-color: blue;

  width: 60%;

  display: table-cell;

}

<div class="body">

  <div class="imgContainer">

    <img src="http://www.appleinspires.me/wp-content/uploads/2013/05/mzl.bneaekit.512x512-75.jpg" alt="Sample Image">

  </div>

  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!</div>

</div>

Have a div with the same height as a sibling image

.imgProductContainer {

  display: flex;

  flex-direction: row;

  /*

    justify-content: center;

    align-items: center;

  */

}

.img-container {

  width: 59%;

}

img {

  width: 100%;

}

.product-container {

  width: 41%;

  background-color: #e4d233;

}

.product-img {

  width: 45%

}

<div class="imgProductContainer">

  <div class="img-container">

    <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />

  </div>

  <div class="product-container">

    <img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">

    <p><span id="product2Name"></span><br>

      <span>2.00 €</span></p>

  </div>

</div>

How to match height of floating sibling divs

Personally I like the equal height columns from www.ejeliot.com

http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.

How to have div same height as sibling and overflow-y auto using flex

You need a script to do this.

1. Set the height of left box to "0": #results { height: 0; }. That way it does not interfer by resizing the right side box.

2. Use an Eventlistener to run the a function after DOM loading: document.addEventListener('DOMContentLoaded', boxResize);

3. Use also an Eventlistner to run the same function again if the browser is resized to stay "up-to-date": window.addEventListener('resize', boxResize);

4. Get the height of the right side box in JS with and save it a variable: let divA = document.querySelector("#map").offsetHeight;

5. resize the left box with the size of the variable: document.querySelector("#results").style.height = divA + "px";

document.addEventListener('DOMContentLoaded', boxResize);
window.addEventListener('resize', boxResize);

function boxResize() {
  let divA = document.querySelector("#map").offsetHeight,
      divB = document.querySelector("#results");
  divB.style.height = divA + "px";
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background-color: red;
  height: 50px;
  flex: 0 0 auto;
}

footer {
  width: 100%;
  background-color: purple;
  height: 100px;
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

#map {
  order: 2;
  flex-grow: 1;
  z-index: 5;
  min-height: 400px;
  position: relative;
  height: 100%;
  background-color: green;
}

#results {
  height: 0;
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
}

<header class="header">

</header>
<main>
  <div class="container">
    <div id="map">

    </div>
    <div id="results">
      <div class="extra-div">

      </div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer">

</footer>

Related Topics