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

#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?

absolute position will not change place on window resize.

only relatively position divs will change place on window resize.

vineet

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.

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

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
#wrapper {
position: relative; /* added for navmenu */
width: 960px;
margin: 0 auto;
}
to my wrapper div fixed it.