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

    Join Date
    Nov 2013
    Rep Power

    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:

    <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 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>
    <script type="text/javascript">
    var   a=document.getElementById("1");
    var   b=document.getElementById("2");
    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
    Rep Power
    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