#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    1
    Rep Power
    0

    2 Columns w/ Equal Height w/ Javascript


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

    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:12.5px;">Content 1<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test</div>
    <div style="margin-right:12.5px">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:12.5px;">Content 2<br>Test<br>Test<br>Test</div>
    <div style=" margin-left:12.5px;">Button 2</div>
    </div>
    
    </div>
    
    <script type="text/javascript">
    <!--
    var   a=document.getElementById("1");
    var   b=document.getElementById("2");
    if(a.scrollHeight<b.scrollHeight)
    {
    a.style.height=b.scrollHeight+"px";
    }
    else{
    b.style.height=a.scrollHeight+"px";
    }
    -->
    </script>
    However, when the columns re-size with content and the resolution changes, the left column (a) does not expand. I would also like to discover a way to only run the code on browsers larger than 640px in height. Can anyone help me? Thank you for your time and energy.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Put your JavaScript into a function, then add the function to an onload event (that way when the document loads, your function will be triggered) and a onresize event (that way when the browser resizes, your function will trigger again). You should look into window.screen.height; to check the height of the device; then add conditional validation to your function, to check to see when the device's resolution is at or above 640 pixels.

IMN logo majestic logo threadwatch logo seochat tools logo