SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ? about div auto resizing

    hi i have a small problem which you guys may be of help

    i have to columns on my site that is right next to each other.. both have various amounts of information in them. i want them to be seperated by a dashed line but im unsure how to make it where if one columns information is greater the dashed line will continue to automatically move down depending on which column has more info. so its possible that one column may have more information then the other at a different time and the dashed like would adjust accordingly.

    i am using <div>'s as information holders and have the left div with a right dashed border..but sometimes my right div has more information and the dashed border does not automatically expand..

    thank you if you can help, even if you just read this.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add a left border to the right div?
    Code:
    <html>
      <head>
        <script langauge="javascript">
          function updateBorder()
          {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            if(div1.offsetHeight > div2.offsetHeight)
            {
              div1.style.borderRight = "1px dashed #000000";
              div2.style.borderLeft = "";
              div1.style.zIndex = 2;
              div2.style.zIndex = 1;
            }
            else
            {
              div1.style.borderRight = "";
              div2.style.borderLeft = "1px dashed #000000";
              div1.style.zIndex = 1;
              div2.style.zIndex = 2;
            }
          }
          function switchTexts()
          {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            var s = div1.innerHTML;
            div1.innerHTML = div2.innerHTML;
            div2.innerHTML = s;
            updateBorder();
          }
        </script>
      </head>
      <body onload="updateBorder()">
        <a href="javascript:void(0);" onclick="switchTexts()">Switch texts</a>
        <div id="div1" style="position:absolute;left:0px;top:50px;width:100px;background-color:#ff0000;">
          This is the div with more text text text text text text text text text text text
        </div> 
        <div id="div2" style="position:absolute;left:100px;top:50px;width:100px;background-color:#00ff00;">
          This is the div with less text text 
        </div> 
      </body>
    </html>

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think, in CSS2, all percentage values, like for the height property, are relative to the parent element's computed value of it's containing block... Make sense? 'Course it does! :-p

    So... You'd want to place the two columns in the same container, like a <div> or something, and then set whatever element that's gonna' make the border's height: 100%. If you don't have them in a containing block (or if you absolutely position them, which removes the columns from the document flow), they'll be calculated by adding the percentage of the <html> to native height of the column--so put them in a container and position that if necessary. I think you'd want something like so:
    Code:
    /* Stylesheet: */
    #col1 { border-right: dashed black .1em; height: 100%; }
    
    <!-- ... On to 'da HTML ... -->
    
    <div id="cols">
      <div id="col1"> <!-- ... --> </div>
      <div id="col2"> <!-- ... --> </div>
    </div>
    Now, this differs from CSS1's height property, which allowed browsers to ignore heights on non-replaced elements (i.e. everything except <img> and <object>). Some browsers (not sure which ones) will follow that standard. Now, I don't think this is so much of a big deal since the worst that will happen is that the border will stop when #col1 does (like it does now). That's part of the goodness of CSS: graceful degradation.

    Hope this helps! I know I'm confused now! ;-)

    ~~Ian

    P.S. I'm reading up on it now, to see if some of the suppositions I made are correct. If they're not, I'll be back. :-p


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
  •