Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute Div Remains When Window Resized

    I'm creating a drop-down menu, and from what I understand, its position would have to be absolute because it's layered on top of the page as opposed to flowing along with it.

    Problem is, when the window is resized, the div stays in place...as I thought it probably would. I try to change the positioning to relative, but that disrupts the page completely.

    Here's the CSS

    Code:
    #m2{
    position: absolute;
    background-color:#d2fafd;
    margin-left: 280px;
    margin-top: 0px;
    width: 230px;
    }
    
    #m2 li{
    position: relative;
    font-size: 1.1em;
    padding: 2px 15px;
    width: 230px;
    border-bottom: 1px solid white;
    list-style: none;
    display: block;
    }
    m2 is the div itself with a fixed-width and margins to move it around. (I tried using just 'top' and 'left' too, but it didn't work). The links in the menu are list items, which I attempt to position relative but that does nothing.

    Anyway, how can I position this drop down menu so that it does not disrupt the flow of the document, but at the same time, it will actually follow along it when resized?

    And while I'm here, what's the difference between using margin-top and just using top to position this div?

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    absolute position will not change place on window resize.

    only relatively position divs will change place on window resize.

    vineet

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vineet View Post
    absolute position will not change place on window resize.

    only relatively position divs will change place on window resize.

    vineet
    Right, and that's the problem. I need to have a sub-menu that will be in its own layer, independent of the rest of the page flow...but at the same time, it needs to re-adjust with the page so that it's consistently under the same menu heading and not just standing statuesque by itself.

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    just make sure all your absolute divs and inside relative positioned divs.

    any absolute div which is not inside relative div will not move on window resize.

    vineet

  • #5
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    What vineet said...
    any absolute div which is not inside relative div will not move on window resize.
    I had exactly the same problem with my drop-down menus, adding
    Code:
    #wrapper {
        position: relative;   /* added for navmenu */
        width: 960px;
        margin: 0 auto;
    }
    to my wrapper div fixed it.


  •  

    Posting Permissions

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