Matching Div Height Problem in Mozilla Browsers

Posted on 2006-05-17
Last Modified: 2011-04-14
When I assign the height of a div through a statement like…


…Mozilla browsers like Firefox seem to ignore this assisgnment.

I have employed the often-referenced Javascript code for matching the heights of two or more divs containing dynamic content to be found at:

 After the script measures the height of each div whose height is to be matched and determines the greatest height via…


…maxHeight gets determined but, when I try to assign the element's height as in the first statement above, it changed the div height in IE 6 but not in Firefox (Mozilla 5.0).

Do I need some different statement for Mozilla?  Will this statement work for both IE and Mozilla or do I need to have a browser conditional to handle this?

Your help is much appreciated!
Question by:pnowell
    LVL 19

    Accepted Solution

    There are a couple of things that could cause that type of behavior:
    1) Browsers that respect the standards expect units for measurements, so you need to add a unit to your assignment.  Most likely, you're using pixels, so add "px" to the end of your assignment:
      contDivs[i].style.height=maxHeight + "px";

      As you've discovered, IE likes to play fast & loose w/ the rules, so it'll let you get away without specifying a unit, and it will assume pixels.  Adding it back in won't change the way IE renders, so it's usually a good idea to include it anyway.

    2) You've changed the style/display of the divs to be inline rather than block.  Inline elements only take up as much space as their content requires, so no amount of changing the style should change the height (it's a pain to wade through, but for more detail, check out the CSS2 spec from the W3C,  Again, IE does things its own way, though, so in that browser, you *can* modify the height of an inline element using the height attribute.

      This second option seems much less likely, but if it is the case, changing the display back to "block" should let you modify the height.  I didn't look through everything on the link you posted (those pages take forever to load, and I'm on a T1), so I don't know if it'll cause any adverse effects elsewhere, but somehow I doubt it.

    Regardless, hope that helps.

    Author Comment


    Thanks!  Yes, the "px" worked.  And I will award you the points and delete the other post.  I found out from E.E. that they made a decision not to show questions in the new questions lists to the person who wrote them definitely leading to the impression that they weren't posted (strange huh?.  But they can be seen by the inquirer under "my Account."

    And Dakyd, please be looking for another post from me with a new question in a few hours on a related topic.  


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now