Trying to position a DIV on top of another

HTML & CSS
1

LINK-
http://www.securehostserver.info/theorthoforum/account/login/

The DIV in question is #full. I want it positioned over the DIV #banner-container but when I add position: absolute the DIV #main-alt collapses and doesn’t grow in height when the DIV #full grows. I tried adding overflow: hidden; to the #main-alt DIV but it isn’t working. Can someone help me? Also, here is a visual example of what I am looking to accomplish it is helps… (https://www.corporategroupbuy.com/index.php/customer/account/login/).

Thanks in advance to anyone who offers help!
Todd

2

Position: absolute takes the element out of the flow. Perhaps you should use position: relative instead, with a negative top setting. I’m not quite clear on the layout you want, so not sure what code to offer.

3

Ralph, I am looking to position the DIV #full overlapping and on top of the DIV that is above it called #banner-alt. The second link in the original post shows a white box partially overlapping the blue background area. That is what I am going for. Any suggestions?

4

I would say just give your main container and footer position: relative and a negative top setting to pull them up into position.

EDIT: or you could just use a background image on the body—as in the site you linked to—and not have an otherwise empty div there.

5

Ralph, I added the position: relative to the #main DIV and the #footer DIV and the content is displayed behind the banner graphic. I am wanting to push the content from the DIV #full on top of #banner-alt. Is this possible? Here is a new link to view the changes you suggested…

LINK-
http://www.securehostserver.info/theorthoforum/account/login/index.011112.html

6

I was going to suggest z-index, but really, I would probably put main-container inside banner-alt instead. I don’t really like having those empty divs for presentation only. Might as well just wrap them around the main-content. That saves all the relative positioning and negative settings.