HTML/CSS Set Div to Height of Sibling

HTML/CSS set div to height of sibling

I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).

I'd go for a table.

Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!

Sibling divs match height in container

I recommend using display: table-row; and display: table-cell; for this. In short, what you do is make a table layout, but using <div> tags, and then style them to behave like a table.

This is better than just using a table for semantic and accessibility reasons.

But generally speaking, CSS does not give you many ways to refer to an element's siblings this way. The <table> tag does, but then it confuses screen readers and things.

If you wanted more rows, you would have more .container <div>s, and then create another <div> wrapping them all, and give it display: table;.

So with the same HTML you had, this CSS does what you want:

.container
{
    display: table-row;
}

.tile
{
    display: table-cell;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}

See Fiddle.

Of note: while display: table; et al. are widely supported, IE did not add support until version 8. If you plan on supporting this for IE 7 or lower, you'll be forced to use a more complicated approach, like @Hristo's.

How to make height same as sibling height

Add height: 100%; to .card and move the min-height to the outer container.

.user-panel {  min-height: 170px;}
.user-panel, .user-panel .card {  display: flex;  border: 1px solid #ccc;  height: 100%;}
.user-panel,.user-panel .card .item {  height: inherit;  text-align: center;}

<div class="row no-padding user-panel">  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>          <div>            <div class="row"><i class="user-profile-icon"></i> </div>            <div>{{data}}</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>            <div>(015106)</div>          </div>        </span>      </div>    </div>  </div>  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>            <div>              <div>MY ACCESSES</div>            </div>            </span>      </div>    </div>  </div>  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>          <div>            <div>MY ACCESSES</div>            </div>          </span>      </div>    </div>  </div></div><div class="row no-padding user-panel">  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>          <div>            <div class="row"><i class="user-profile-icon"></i> </div>            <div>{{data}}</div>            <div>(015106)</div>          </div>        </span>      </div>    </div>  </div>  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>            <div>              <div>MY ACCESSES</div>            </div>            </span>      </div>    </div>  </div>  <div class="col col-33 no-padding">    <div class="card  no-padding">      <div class="item item-text-wrap">        <span>          <div>            <div>MY ACCESSES</div>            </div>          </span>      </div>    </div>  </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 make a scroll div height only as big as sibling div in row

You should wrap the #first with extra wrapper and apply the background color to it. And use height:0 min-height:100% trick on the #first

I also fixed your html mistake. An ID can only be used once per page. So I changed the #block as .block

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

.scroll-area {
  overflow-y:auto;
  background-color: #00F;
}

#first {
  min-height: 100%;
  height: 0;
}

#second {
  background-color: #0F0;
  /* height: fit-content; // unnecessary */
  width: 200px;
}

.block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div class="scroll-area">
    <div id="first">
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
    </div>
  </div>
  <div id="second">
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>

CSS - How to set element height to that of sibling

I guess what you are trying to achieve is getting your elements vertically aligned, making your icon center the box.
Even if you get the height of your siblings to match, it's hard to vertically align elements.

What you are looking for is flexbox to handle your problem, doing something like this instead.
This will make the container align the two child, and center the elements, that way the css handles the vertical aligment for you.

body {
  background: lightgray;
}
.icon {
  height: 20px;
  padding: 10px;
}
.container {
  background: white;
  border-radius: 5px;
  border: 1px solid red;
  
  display: flex;
  align-items: center;
}

<div class="container">
  <span class="child">
    <img class="icon" src="https://www.freeiconspng.com/thumbs/error-icon/error-icon-32.png" />
  </span>
  <span class="child">Something's not quite right. <br/> Please try again later. If this is your second try, please give us a call, and we can help you make the payment.
  </span>
</div>

Set elements height to follow sibling height in display flex row

... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :

example in a column since in a row should not be an issue

.super-child {
  display: grid;
  grid-auto-rows: 1fr;
}
.super-child > .uneditable {
  border: solid;
}

<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A <br> AA</div>
    </div>
    <div class="uneditable">
      <div class="B"> B</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A </div>
    </div>
    <div class="uneditable">
      <div class="B"> B<br> BB</div>
    </div>
  </div>
</div>

In a sequence of sibling divs, can you set the height to the highest value?

Simply make use of CSS' table display.

Take the following example markup:

<div>
    <figure>Example one</figure>
    <figure>This is example twooooo</figure>
    <figure>3</figure>
</div>

If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:

div {
    display:table;
}

div > figure {
    display:table-cell;
}

All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.

Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.

For browser support, see: http://caniuse.com/#feat=css-table

Equalise Height of a Sibling with CSS only?

You can use display: flex on the wrapper (this works because align-items property is stretch by default) - see demo below:

#wrapper {display: flex;width: 50%; height; 200px;}#box1 {background: red;}#box2 {background: blue; height: 100px;}.box {float: left; color: white; width: 50%;}

<div id="wrapper">  <div class="box" id="box1">Box 1</div>  <div class="box" id="box2">Box 2</div></div>

HTML/CSS Set Div to Height of Sibling