CODEWITHSUNDEEP
htmlcss
CSS Apprentice
CSS Apprentice

Reputation: 939

Match Div Heights That Aren't In A Row And Are Nested A Bunch

Age old question, but potentially with a twist. I have 3 divs with varying amounts of content and I need them to be the same height. The kicker though, I'm using a CMS and this has their HTML structure is all sorts of weird. They aren't on a row, and they each have like 6 container divs.

This is basically what we're looking like:

HTML:

<div class="top-div">
  <div>
    <div>
      <div>
        <div>
          <!-- content... -->
        </div>
      </div>
    </div>
  </div>
</div>

repeat...

CSS:

.top-div {
   display: inline-block;
   width: 33%;
}

Do I have options here?

Remember: I can't change the HTML

jsFiddle: http://jsfiddle.net/5csorg73/

Upvotes: 0

Views: 32

Answers (3)

pedrodj46
pedrodj46

Reputation: 161

If you can use jQuery, include this script:

https://github.com/liabru/jquery-match-height

And with one row in Javascript, you can add the same height at all div in the row

$('.class-name').matchHeight();

Upvotes: 1

Nasco.Chachev
Nasco.Chachev

Reputation: 676

Try to apply vertical-align:top; to your divs and fixed height.

Upvotes: 0

Gabriel Augusto
Gabriel Augusto

Reputation: 436

Maybe this could help: 

.top-div {
  background-color: #ffffff;
  display: inline-block;  
  margin: 2% 0.5%;
  width: 30%;
  position:relative;
  float:left;
}

.top-div * {
    display: inline-block;  
}

.button {
  background-color: red;
  margin: 0 auto;
  padding: 1% 2%;
  text-align: center;
  height:20px;
}

div div div div div{
  height:200px;
}

Upvotes: 0

Related Questions