SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with setting heights of divs

    Hi,

    I tried setting the heights of two divs to be equal to each other, went through Kevin Yank's article on that subject, went through the threads on this subject on the forum, went through the Cross-browser article, downloaded the files, made the adjustments and still it doesn't work, the divs now appear one below the other.

    Grateful if anyone can take a look here, the web address is:
    http://www.fibjonline.com/lccu2/index1.php

    The other pages without the script is at:
    http://www.fibjonline.com/lccu2

    Thanks

    CathyM

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, forgot to add the js file.



    // layout2.js
    // Cross-Browser.com & SitePoint.com - Equal Column Height Demo (2 Column)

    if (document.getElementById || document.all) { // minimum dhtml support required
    document.write("<"+"style type='text/css'>#footer{visibility:hidden;}<"+"/style>");
    window.onload = winOnLoad;
    }
    function winOnLoad()
    {
    var ele = xGetElementById('leftColumn');
    if (ele && xDef(ele.style, ele.offsetHeight)) { // another compatibility check
    adjustLayout();
    xAddEventListener(window, 'resize', winOnResize, false);
    }
    }
    function winOnResize()
    {
    adjustLayout();
    }
    function adjustLayout()
    {
    // Get content heights
    var cHeight = xHeight('content');
    var lHeight = xHeight('sidebar');

    // Find the maximum height
    var maxHeight = Math.max(lHeight, cHeight);

    // Assign maximum height to all columns
    xHeight('leftColumn', maxHeight);
    xHeight('centerColumn', maxHeight);

    // Show the footer
    xShow('footer');
    }

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CathyM,

    I don't have a solution yet, but just wanted to let you know I've been looking at it. I have an idea to try but may not be able to till tomorrow. I'll post back as soon as I can.


  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This script has two problems with your layout. What, in the demo, was the left column you now have on the right. And in order to do so you floated it. There's nothing wrong with that type of layout, but this script wasn't designed to work with it. Setting the position or size of a floated element always causes bad side-effects.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may have found a simple solution - even with the floated element, I'm really surprised

    It needs more testing - try it out on different browsers. I'm using Opera 9.01, Firefox 1.0.2 and IE 6.

    It uses the html and css from your regular pages, not this page. Replace the contents of layout2.js with this:
    Code:
    // xlayout.js
    // from Cross-Browser.com
    
    if (document.getElementById || document.all) { // minimum dhtml support required     
      window.onload = winOnLoad;
    }
    
    function winOnLoad()
    {
      var e = xGetElementById('innerwrapper');
      if (e && xDef(e.style, e.offsetHeight)) { // another compatibility check
        adjustLayout();
        xAddEventListener(window, 'resize', winOnResize, false);
      }
    }
    
    function winOnResize()
    {
      adjustLayout();
    }
    
    function adjustLayout()
    {
      var h = Math.max(xHeight('sidebarContent'), xHeight('contentContent'));
      h += 20; // experiment with this (or add bottom padding to sidebar)
      xHeight('sidebar', h);
      xHeight('content', h);
    }
    The only changes I made to the html were:
    In the content DIV, wrap everything in a DIV with id = 'contentContent'.
    In the sidebar DIV, wrap everything in a DIV with id = 'sidebarContent'.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike,

    Made the changes, it worked in IE6, but not all the pages worked in Opera 9.01 and Firefox 1.5.0.6, but could be something with the pages themselves and the css. I have various divs which are floated in the various pages, and one thing I have found is that sometimes IE render the floats and the clear statements differently than Opera and Firefox, will work on it during the weekend and let you know how that goes.

    CathyM


Bookmarks

Posting Permissions

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