CODEWITHSUNDEEP
jqueryhtmlcss
Steve
Steve

Reputation: 2588

Auto height for divs regardless of the height with CSS

I have multiple divs horizontally stacked. The problem is that their alignment disturbs when their height is mismatched. What I want is that CSS automatically gets the tallest div and gives it a min-height (may be through jQuery or some way through CSS)

Hence HTML is:-

<div class="div-each-inner">
   <div class="block-item-title">1st Div  </div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris. Penatibus at condimentum pharetra.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">2nd Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing pharetra.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">3rd Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod a.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">4th Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">5th Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac.</p>
   </div>
</div>

CSS

.div-each-inner {
    float: left;
    width: 300px;
    margin-right: 6%;
    display: block;
    margin-bottom: 30px;
    min-height: 350px;
    height: 100%;
}

Upvotes: 0

Views: 73

Answers (3)

Romulo
Romulo

Reputation: 5104

You already heard of the CSS Flexbox? Check the definition:

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

You can read more about it in A Complete Guide to Flexbox

Here's an example showing the use:

.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  border: 1px solid #000;
}
.box {
  flex: 1;
  border: 1px solid #000;
  background: #dedede;
}
<div class="wrapper">

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>
  </div>

</div>

Upvotes: 1

Brian T
Brian T

Reputation: 93

Flexbox can fix this issue. Put a .wrapper around your container. All boxes will expand to match the height of the tallest one.

.wrapper {
    display: flex;
}

.div-each-inner {
    width: 300px;
    margin-right: 6%;
    display: block;
    margin-bottom: 30px;
}

Upvotes: 1

Talya S
Talya S

Reputation: 754

Have you considered assigning them display:table-cell? That essentially makes them a table, where they will automatically all be assigned the highest height.

If you need space between them you can give their container a border-spacing property, and if that adds spacing that you don't want around the container counter it with negative margins like so:

.container {
    border-spacing:10px;
    margin:-10px;
}


.div-each-inner {
  border: 1px solid #555;
  display: table-cell;
  width: 200px;
}
<div class="div-each-inner">
  <div class="block-item-title">1st Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris. Penatibus at condimentum pharetra.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">2nd Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing pharetra.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">3rd Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod a.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">4th Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">5th Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac.</p>
  </div>
</div>

Upvotes: 2

Related Questions