<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
	var currentWidth = $(window).width();
	if (previousWidth != currentWidth) {
		doAdjust = true;
	}
	previousWidth = currentWidth;
})

// every half second

$(function() {
	setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
	if (doAdjust) {
		adjustBoxHeights();
		doAdjust = false;
	}
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
	var maxHeight = 0;
	$('div#boxes div').each(function(){
		$(this).height('auto');
		if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
	});
	$('div#boxes div').each(function(){
		$(this).height(maxHeight);
	});
}