www.webdeveloper.com
Results 1 to 5 of 5

Thread: Div positioning

  1. #1
    Join Date
    Dec 2012
    Posts
    54

    Div positioning

    Hey!

    I'm sure there is an easy solution, but I am missing it at the moment. Basicly I want to have three or four different divs that put their top location based on the bottom of the last div. So if someone resized the window and made it less wide then the top div would become taller and so the div below would need to move down some. I tried

    Code:
    <script>
      function Resize()
      {
        var TextDiv = document.getElementById("text");
        var LinkDiv = document.getElementById("stringlink");
        LinkDiv.style.top = TextDiv.style.bottom;
        // I also tried
        LinkDiv.sytle.top = TextDiv.style.top + TextDiv.style.height;
      }
      window.onload = Resize();
      window.onresize = Resize();
    </script>
    The only time it works is if I specifically give bottom or height a number value and not a % value, but I want all the divs to have % values so that they can adjust based on the size of the screen the user is using and not based on the size of the screen I tested it on.

    Any tips?
    Thanks again for your time.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Use only CSS with a div without width (or 100%) and the three following with a class
    .fltlft {display:block;width:33%;float:left;}

  3. #3
    Join Date
    Dec 2012
    Posts
    54
    so in other words there is no way to circumvent the problem?

  4. #4
    Join Date
    Dec 2012
    Posts
    54
    I found the problem.
    Code:
    var x = Text.style.top;
    returns a string with px appended to it. So to do arithmatic with two such variables you would end up with an appended string looking like

    10px100px

    Trying to give that to a style value obviously breaks the code. I still haven't found out how to get the value of the height if it is based on a % width and the window resizes.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Use offsetTop or offsetLeft (see for example this page) which are read only and give numbers.

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