Easy Equal Height Divs Without JavaScript Possible

Easy equal height DIVs without JavaScript possible?

There is no perfect way as far as I know, and this is one of the weak points of CSS.

In your case, however, you may be able to work with the Faux Columns technique.

How can I make equal height system without using any javascript or jquery plugin

Yes you can.
You have to use css3 dispaly: table; for the equal height wrapper and display: table-cell; for the each element of equal height wrapper.

Here is the simple way.

HTML & CSS Code:

.equal-height-row{  display: table;}.equal-height-row > .equal-height-box{  display: table-cell;  vertical-align: middle;  padding: 2em;  box-sizing: border-box;  background-color: lightgrey;}

<div class="equal-height-row">     <div class="equal-height-box">Box1<br>box 1 content</div>   <div class="equal-height-box">Box2</div>   <div class="equal-height-box">Box3</div>  </div>

Make divs with equal heights according to dynamic contents without javascript

You can use flexbox for this.

We can set display: flex with flex-wrap: wrap on #container for starters, then set the width of each .product-wrapper as you've already done. That'll take care of equally sizing the product wrappers along rows.

Then we can also use display: flex for each .product-wrapper and again for each .product-img-wrapper to take care of centering things within each product wrapper.

The feature we are taking advantage of here is automatic margins with flexbox.

Basically, display: flex on a parent with margin: auto on a child will automatically center that child element vertically and horizontally within the parent. Or you can align a child to one side or another by using an automatic margin on the opposite side. For example, to align our titles to the bottom of their parents, we use margin-top: auto. But since we want them horizontally centered too, we end up with margin: auto auto 0 auto.

* {  box-sizing: border-box;}
#container {  display: flex;  flex-wrap: wrap;  width: 100%;}
.product-wrapper {  display: flex;  flex-direction: column;  margin: 10px;  border: 1px solid #DDD;  width: calc(20% - 20px);}
.product-img-wrapper {  /*display: flex;*/  padding: 10px;  margin: auto;}
.product-img-wrapper img {  /*margin: auto;*/  width: 100%;  height: auto;}
.product-title {  display: block;  text-align: center;  font-family: Arial, sans-serif;  margin: auto auto 0 auto;}
@media screen and (max-width: 1200px) {  .product-wrapper {    width: calc(25% - 20px);  }  /* 4 products in a row */}
@media screen and (max-width: 1000px) {  .product-wrapper {    width: calc(33.33333% - 20px);  }  /* 3 products in a row */}
@media screen and (max-width: 800px) {  .product-wrapper {    width: calc(50% - 20px);  }  /* 2 products in a row */}
@media screen and (max-width: 600px) {  .product-wrapper {    width: calc(100% - 20px);  }  /* 1 product in a row */}

<div id="container">  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img0" src="http://via.placeholder.com/80x60" class="product-img" />    </div>    <div class="product-title">      Titel img0    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img1" src="http://via.placeholder.com/2000x3000" class="product-img" />    </div>    <div class="product-title">      Titel img1    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img2" src="http://via.placeholder.com/300x300" class="product-img" />    </div>    <div class="product-title">      Titel img2    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img3" src="http://via.placeholder.com/400x300" class="product-img" />    </div>    <div class="product-title">      Titel img3    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img4" src="http://via.placeholder.com/300x400" class="product-img" />    </div>    <div class="product-title">      Titel img4    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img5" src="http://via.placeholder.com/300x300" class="product-img" />    </div>    <div class="product-title">      Titel img5    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img6" src="http://via.placeholder.com/300x200" class="product-img" />    </div>    <div class="product-title">      Titel img6    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img7" src="http://via.placeholder.com/200x300" class="product-img" />    </div>    <div class="product-title">      Titel img7    </div>  </div>  <div class="product-wrapper">    <div class="product-img-wrapper">      <img id="product-img8" src="http://via.placeholder.com/300x300" class="product-img" />    </div>    <div class="product-title">      Titel img8    </div>  </div></div><!-- container -->

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Floating divs, equal height - fill space with additional div without overflow

Pure CSS solution

Here is a DEMO of that solution.

In this DEMO, you see multipple Rows,
each Row can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder, and can have any number of Elements you want.

all the column in a row will always have the same height, and the last arrow in the row will fill that space.

In the DEMO you can see 3 Rows.
The First Row has the starting point, so no stretch needed there.
The Second Row has 3 ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row has 2 ElementsHolder, behave as expected.

notice that the stretching works regardless of the Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)

If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)

The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;,
Each row has ElementsHolders that gets equal width.

each one of those ElementsHolder is also a flex box, but this time his direction is opposite (flex-direction: column;).

the child's of ElementsHolder are Elements & Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.

all of that is achieved using the flex property with the appropriate values.

More about the flex-model can be found HERE

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {  display: grid;  grid-auto-flow: column;  gap: 5%;}
.col {  border: solid;}

<div class="row">  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>

How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

You could use jQuery, but there are better ways to do this.

This sort of question comes up a lot and there are generally 3 answers...

1. Use CSS

This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).

2. Use Tables

This seems to work great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, and you should too.

3. Use jQuery / JavaScript

This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.

---

Related Topics