I am trying to get both columns in the following code to equal each-other in height for a responsive design. I have tried CSS, but it will not work for a solution. I have tried javascript, and have come close with the following code:

[code]

<div>

<div style=”float:left; width:50%; min-width:300px;”>
<div id=”1″ class=”1″ style=”border:1px solid #CCC; border-radius:3px; margin-right:[url removed, login to view];”>Content 1<br>Test<br>Test<br>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
<div style=”margin-right:[url removed, login to view]”>Button 1</div>
</div>

<div style=”float:right; width:50%; min-width:300px;”>
<div id=”2″ class=”2″ style=”border:1px solid #CCC; border-radius:3px; margin-left:[url removed, login to view];”>Content 2<br>Test</div>
<div style=” margin-left:[url removed, login to view];”>Button 2</div>
</div>

</div>

<script type=”text/javascript”>
function equal()
{
<!–
var a=[url removed, login to view](“1”);
var b=[url removed, login to view](“2”);
if([url removed, login to view]<[url removed, login to view])
{
a.style.height=b.scrollHeight+”px”;
}
else{
b.style.height=a.scrollHeight+”px”;
}
–>
}
[url removed, login to view] = equal;
[url removed, login to view] = equal;
</script>

[/code]

However, when the columns are re-sized to be taller in height with content and the resolution increases, the left column (a) does not expand. I need both columns to grow or shrink and maintain the same size. I would also like to only run the code on browsers larger than 640px in height.

If needed this page also can load the Prototype Javascript Framework 1.7.