Help please!! I need to ensure two divs remain the same height... javascript?

Hi Everyone... I'm hoping you can help me out please

I've just finished a site... http://www.centralwesthire.com.au and I need code it so that the left and right content divs remain the same height as each other. I've been told that javascript is the way to go but I just cant find what I need... anyone out there have any ideas... PLEASE!!

Thanks very much

Rachelle

 

Add this script after right_content div and try

<script type="text/javascript">
    left_content_height = document.getElementById("left_content").offsetHeight+"px";
    right_content_height = document.getElementById("right_content").offsetHeight+"px";

    if(left_content_height>right_content_height){
        document.getElementById("left_content").style.height = left_content_height;
        document.getElementById("right_content").style.height = left_content_height;
    }
    if(left_content_height<right_content_height){      
        document.getElementById("left_content").style.height = right_content_height;
        document.getElementById("right_content").style.height = right_content_height;
    }
</script>

Code (markup):

 

Thanks ever so much - I'll try it now... appreciate that

 

You are a star!! It works a treat - thanks so much!!

 

this really ought to be a css solution. you ought to assign a height to the parent of the 2 content areas and then set their respective height to 100%

 

But that would mean setting a particular height wouldnt it? The height varies on each page.

 

not really, the parent element being set or auto with children div's heights at 100% would work:

http://dci.uk.net/colheight.html

check the css, i have assigned it a height of 600px for the parent element and both children at 100% fill it in nicely, no need for js. it gets trickier if you want to use a dynamic height for the parent element as it may cut though but typically, you'd have some constraint due to side menu or whatever anyway.

 

Try it with long or short text!!! This example is not dynamic!!

 

no but you can make it work within the confines of a larger framework - like main content and sidebar, etc.

 

Dimitar Christoff, have you tested your example by Firefox?? Write a longer text and look at it.

 

I'll try it now Dimitar

s_ruben - your example works great if there is a lot of text, on the pages where there is very little text it doesnt work at all for some reason... I'll upload an example to show you...

http://centralwesthire.com.au/products_test.html

 

You have set the script in wrong place. Set it after closing tag of <div id = "right_content">

<div id = "right_content">
  <h2><a name="toilets" id="toilets"></a>Temporary  Toilets and Buildings</h2>
  <p>We  have a range of temporary, or portable, toilets, site offices and other  buildings available which are new to the Central West Hire product range. </p>
  <p>    With  the toilets being stand-alone units they have an added bonus in that they can  be placed almost anywhere on a site.</p>
  <p>&nbsp;</p>
  </div>

  <script type="text/javascript">
    left_content_height = document.getElementById("left_content").offsetHeight+"px";
    right_content_height = document.getElementById("right_content").offsetHeight+"px";

    if(left_content_height>right_content_height){
        document.getElementById("left_content").style.height = left_content_height;
        document.getElementById("right_content").style.height = left_content_height;
    }
    if(left_content_height<right_content_height){
        document.getElementById("left_content").style.height = right_content_height;
        document.getElementById("right_content").style.height = right_content_height;
    }
</script>

Code (markup):

 

Ah.. I thought you meant literally after the end of the opening div... I'll try that now thanks!!

 

Works a treat... thanks so much!! This would have driven me nuts!

dimitar, I tried your option but like ruben said it wasn't dynamic. Thanks very much anyway - very much appreciated

 

Couldn't you just use a table with two columns? And use CSS (margin-right, margin-left) to get the spacing between them. I prefer not to use javascript unless it is necessary, I wouldn't bother now because it works fine... but for future reference anyway.

 

Yes I could use a table - but like you with javascript, I prefer to not use tables unless totally necessary. This scenario has bugged me with a few projects of mine, so I'm really pleased to have found a fix for it

Do you use tables a lot when you build sites? I find it soooo much easier to use them, but I've read that it hinders SEO which is my reason for not using them.

 

I use them only when I can't get div's to do what I want them to. I am not sure as far as SEO is concerned... Although many websites use tables for layouts..
http://en.wikipedia.org/wiki/Main_Page << They use tables for content... and I guess they must be fairly seo friendly..