Web Hosting, Design, & Coding forum

General discussion

Positioning a div layer beneath overflow

by Remix Windsong / June 14, 2004 6:10 AM PDT

The page I'm working on has a header image, a left navigation image, a space for content, and a footer. The CSS has everything absolutely positioned except for the footer, which is relatively positioned from the left and bottom, and the content layer has an overflow property of "visible". The HTML is set up simply with the divs going in that same order.

When I went from absolute positioning to relative, the #footer layer suddenly became invisible in both IE and Safari. Z-indexing didn't help. Absolute positioning from the bottom still caused the footer to appear above the content overflow. Floating the layers and using the overflow property "auto" both create undesireable site effects. What I really need is for the footer to stay below the content regardless of how much overflow it has. Any ideas would be appreciated.

This is the CSS:

#header {
position:absolute;
left:0px;
top:0px;
width:770px;
height:166px;
}

#nav {
position:absolute;
left:0px;
top:166px;
width:214px;
height:771px;
}

#content {
position:absolute;
left:224px;
top:166px;
width:546px;
height:771px;
overflow: visible;
}

#footer {
position:relative;
left:70px;
bottom:40px;
width: 700px;
}

Discussion is locked
You are posting a reply to: Positioning a div layer beneath overflow
The posting of advertisements, profanity, or personal attacks is prohibited. Please refer to our CNET Forums policies for details. All submitted content is subject to our Terms of Use.
Track this discussion and email me when there are updates

If you're asking for technical help, please be sure to include all your system info, including operating system, model number, and any other specifics related to the problem. Also please exercise your best judgment when posting in the forums--revealing personal information such as your e-mail address, telephone number, and address is not recommended.

You are reporting the following post: Positioning a div layer beneath overflow
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Collapse -
how about a url . . .
by slim___shady / June 15, 2004 6:02 AM PDT

. . . to see the problem

Collapse -
Re: Positioning a div layer beneath overflow
by fitz--2008 / September 8, 2004 8:18 PM PDT

Create a main container, put everything inside it except the footer, place that outside it, and it should work. There may be better ways to do what you want but I have had success with this method.

Fitz.

Collapse -
Re: Positioning a div layer beneath overflow
by fitz--2008 / September 8, 2004 8:22 PM PDT

A quick tip on a different matter for your CSS, try not to use height, instead use padding. I have found it to be more browser friendly....
fitz.

Popular Forums
icon
Computer Newbies 10,686 discussions
icon
Computer Help 54,365 discussions
icon
Laptops 21,181 discussions
icon
Networking & Wireless 16,313 discussions
icon
Phones 17,137 discussions
icon
Security 31,287 discussions
icon
TVs & Home Theaters 22,101 discussions
icon
Windows 7 8,164 discussions
icon
Windows 10 2,657 discussions

CNET FORUMS TOP DISCUSSION

Help, my PC with Windows 10 won't shut down properly

Since upgrading to Windows 10 my computer won't shut down properly. I use the menu button shutdown and the screen goes blank, but the system does not fully shut down. The only way to get it to shut down is to hold the physical power button down till it shuts down. Any suggestions?