javascript - (Fixed by design change) Calculating heights to keep two columns equal height with jQuery on a responsive design site -

this no longer issue design has been changed, i'll leave question if other people have similar issue can discuss it.

i working on site there section containing 4 elements 50% width, 3 of these elements images of different sizes , 1 text section (this section of text has 3 sets of content can changed through set of navigation buttons @ top. elements within section have divided 2 columns placed next eachother , have remain same height no matter how user re-sizes window.

http://jsfiddle.net/jbalr019/1/

$(window).load(function() {    $promotiontopleft = $('.promotion-top-left'); $promotiontopright = $('.promotion-top-right'); $promotioncenterleft = $('.promotion-center-left'); $promotioncenterright = $('.promotion-center-right'); $promotionleftcolumn = $('.left-column.grid-column'); $promotionrightcolumn = $('.right-column.grid-column');  var leftcolumnheight = $promotionleftcolumn.innerheight(); var rightcolumnheight = $promotionrightcolumn.innerheight(); var columnheightdifference = rightcolumnheight - leftcolumnheight;  if (leftcolumnheight < rightcolumnheight) {     if (leftcolumnheight != rightcolumnheight) {         // console.log(columnheightdifference);         $promotiontopleft.css('margin-bottom', columnheightdifference);      }      $(window).resize(function(){         var leftcolumnheight = $promotionleftcolumn.innerheight();         var rightcolumnheight = $promotionrightcolumn.innerheight();         var columnheightdifference = rightcolumnheight - leftcolumnheight;          if (leftcolumnheight != rightcolumnheight) {             // console.log(columnheightdifference);             $promotiontopleft.css('margin-bottom', columnheightdifference);          }     }); } }); 

above js fiddle i've made similar relevant section of actual site possible, there couple differences though. jquery calculates height of 2 columns finds difference , adds margin bottom of top-left (text) block.

i've tried putting them row items instead of columns fit under eachother page gets re-sized. because of text section's growth pushes other elements onto right side of screen rather falling below eachother.

also note full-width site.

maybe wana this

---

edit:

okay, missunderstood you, here's updated, resonsive variant.

* {      margin:0;      padding:0;  }    .container {      display:table;      table-layout:fixed;      width:100%;      height:100%;            border:solid 1px black;      box-sizing:border-box;  }  .container-ele {      display:block;      padding:10px;      box-sizing: brder-box;      vertical-align:top;  }  .content {      background:#eee;  }    img {      display:block;      float:left;      width:100%;      background:red;      margin:1% 0;  }    @media(min-width: 320px) {      .container-ele {          display: table-cell;      }  }

<div class="container">      <div class="container-ele">          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. donec diam lectus. sed sit amet ipsum mauris. maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. donec et mollis dolor. praesent et diam eget libero egestas mattis sit amet vitae augue. nam tincidunt congue enim, ut porta lorem lacinia consectetur. donec ut libero sed arcu vehicula ultricies non tortor. lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>          <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">      </div>      <div class="container-ele">          <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">          <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">      </div>  </div>