www.webdeveloper.com
Results 1 to 2 of 2

Thread: 2 Column w/ Equal Height w/ Javascript

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    2 Column 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:

    HTML 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, they 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
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Not sure I understand your problem, but I do know that id and name values CANNOT begin with a number.
    Don't know if that will fix it, but the change is below.
    It may also apply to the CSS class assignment, but you did not include that for further testing.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    </head>
    <body>
    <div>
    
    <div style="float:left; width:50%; min-width:300px;">
    <div id="d1" 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>
    <button style="margin-right:12.5px">Button 1</button>
    </div>
    
    <div style="float:right; width:50%; min-width:300px;">
    <div id="d2" class="2" style="border:1px solid #CCC; border-radius:3px; margin-left:12.5px;">
    Content 2<br>Test<br>Test<br>Test
    </div>
    <button style="margin-left:12.5px;">Button 2</button>
    </div>
    
    </div>
    
    <script type="text/javascript">
    var   a=document.getElementById("d1");
    var   b=document.getElementById("d2");
    if(a.scrollHeight<b.scrollHeight) {
      a.style.height=b.scrollHeight+"px";
    } else {
      b.style.height=a.scrollHeight+"px";
    }
    </script>
    </body>
    </html>
    Also, your button logic does nothing without an event assignment and using a <div> tag might work with changes,
    I substituted the <button> tag there.

    Finally, the <!-- and --> in the JS section is not needed on modern browsers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles