camwest · June 22, 2012 18:22
diff --git a/gistfile1.txt b/gistfile1.txt
 <!doctype html>

 <html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  </head>
  <body>
    <style>
      #outer {
        position:relative;
      }

      #col1 {
        position:absolute;
        left:0;
        background:grey;
      }

      #col1inner {
        float:right;
        background:green;
      }

      #col2inner {
        float:left;
        background:yellow;
      }

      #col2 {
        position:absolute;
        right:0;
        background:red;
      }
    </style>

    <div id="outer">
      <div id="col1">
        <div id="col1inner">
           <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
          <p>Hello world</p>
         <p>Hello world</p>
        </div>
      </div>

      <div id="col2">
        <div id="col2inner">
          <p>Small world</p>
        </div>
      </div>
    </div>

    <script>
      function calculateColumns() {
        var width = $('#outer').width();
        var middle = width / 2;
        var negativeOffset = 115;

        $('#col1').css({ right: middle + negativeOffset + 'px' });
        $('#col2').css({ left: middle - negativeOffset + 'px' });

        var col1Height = $('#col1inner').height();
        var col2Height = $('#col2inner').height();

        if (col1Height > col2Height) {
          $('#outer').height(col1Height);
          $('#col1').height(col1Height);
          $('#col2').height(col1Height);
        } else {
          $('#outer').height(col2Height);
          $('#col1').height(col2Height);
          $('#col2').height(col2Height);
        }
      }

      $(document).ready(function() {
        calculateColumns();

        $(window).resize(function() {
          calculateColumns();
        });
      });
    </script>
  </body>
 </html>
	<!doctype html>

	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	</head>
	<body>
	<style>
	#outer {
	position:relative;
	}

	#col1 {
	position:absolute;
	left:0;
	background:grey;
	}

	#col1inner {
	float:right;
	background:green;
	}

	#col2inner {
	float:left;
	background:yellow;
	}

	#col2 {
	position:absolute;
	right:0;
	background:red;
	}
	</style>

	<div id="outer">
	<div id="col1">
	<div id="col1inner">
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	<p>Hello world</p>
	</div>
	</div>

	<div id="col2">
	<div id="col2inner">
	<p>Small world</p>
	</div>
	</div>
	</div>

	<script>
	function calculateColumns() {
	var width = $('#outer').width();
	var middle = width / 2;
	var negativeOffset = 115;

	$('#col1').css({ right: middle + negativeOffset + 'px' });
	$('#col2').css({ left: middle - negativeOffset + 'px' });

	var col1Height = $('#col1inner').height();
	var col2Height = $('#col2inner').height();

	if (col1Height > col2Height) {
	$('#outer').height(col1Height);
	$('#col1').height(col1Height);
	$('#col2').height(col1Height);
	} else {
	$('#outer').height(col2Height);
	$('#col1').height(col2Height);
	$('#col2').height(col2Height);
	}
	}

	$(document).ready(function() {
	calculateColumns();

	$(window).resize(function() {
	calculateColumns();
	});
	});
	</script>
	</body>
	</html>