CODEWITHSUNDEEP
jquerycss
NaN
NaN

Reputation: 1306

How to get parent element to grow with content using JQuery

I cannot seem to get this just right. I've been all over trying to find a solution to be able to have 3 inline-block elements that will grow to the tallest content with vertical borders. It's the borders that are making this so difficult. If I didn't need the borders, I'd be fine but I can't do without them.

What I have works, sort of... If I resize the browser window, and the left element is the tallest, everything looks fine; the borders are all 100% and the parent div grows with the content inside.

However, if the center or the right div have the tallest content, the vertical borders fall short of 100%. I thought to fix this I would give the middle and right elements a 100% height. This does bring the borders to the ground when I resize but now, the parent no longer grows with the tallest element and the content bleeds out. please see the attached pic.

Can someone please help me get this fixed? Live on JSBin

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrapper {
        float:left;
        width:100%;
        border-top:1px solid #000;
        border-bottom:2px solid #000;
      }
      #wrapper .col {
        float:left;
        width:33%;
        display:inline-block;
      }
      #wrapper .col:nth-child(1) {
        border-right:2px solid #000;
     }
      #wrapper .col:nth-child(2) {
        border-right:2px solid #000;
        height:100%;
      }
      #wrapper .col div {
        padding:10px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      $(window).on('load resize', function(){
        var $div = $('#wrapper .col');
        var max = 0;
        $.each($div, function(){
          if(parseInt($(this).outerHeight()) > max){
            max = parseInt($(this).outerHeight())
            $("#wrapper").css('height', max + 'px');
          }
        });
      }).resize();
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div class="col">
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
      </div>
      <div class="col">
1<br>
1<br>
      </div>
    </div>
  </body>
</html>

This is what it looks like: enter image description here

EDIT:

I'd like to add that if anyone has a better way to achieve what I'm trying to do, I'm very open.

Upvotes: 1

Views: 206

Answers (2)

wf4
wf4

Reputation: 3827

You don't need javascript to do this, you can do it using html and css.

http://jsfiddle.net/wf_4/Puu3u/

css:

 #wrapper {
    width:100%;
    border-top:1px solid #000;
    border-bottom:2px solid #000;
    display:table;
  }
  #wrapper .col {
    width:33%;
    display:table-cell;
  }
  #wrapper .col:nth-child(1) {
    border-right:2px solid #000;
 }
  #wrapper .col:nth-child(2) {
    border-right:2px solid #000;
  }
  #wrapper .col {
    padding:10px;
  }

HTML:

<div id="wrapper">
    <div class="col">
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
       1<br />
    </div>
    <div class="col">
       1<br />
       1<br />
    </div>
</div>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074989

The thing is, with float: left;, you can't use CSS to tell them to be the height of their container anymore.

I expect there's a better overall HTML/CSS solution (don't shoot me, but this looks an awful lot like a table), but with that markup, your best bet is probably sizing the elements directly: Live Example

$(window).on('load resize', function(){
  var $div = $('#wrapper .col');
  var max = 0;

  // let them all size naturally
  $div.css('height', '');

  // now find the max
  $div.each(function(){
    var $this = $(this),
        height = $this.outerHeight();
    if (height > max) {
      max = height;
    }
  });
  // then apply it
  $div.each(function(){
    $(this).css('height', max);
  });
}).resize();

Upvotes: 2

Related Questions