Question

I have a nav bar with buttons that raise when you hover over them. The problem is the content also raises with it. Its as if the content won’t stay static with its container. I’m using z-index so a lot of the positioning has to be relative, but playing around with other positioning doesn’t seem to help. This has been driving me nuts. Any suggestions?

Link removed for privacy, or whatever

I’m linking directly to the full page to show the full problem. Sorry if there’s a rule against that; I’m new here.

Also, its not finished yet and the code is really sloppy so, you know, don’t judge.

Answer 1

First, the HTML for your nav is invalid. You’ve got anchor tags wrapping list items. You’re also doing a lot of tricks with negative margins because of floated elements. It would be better to add overflow:hidden; onto your nav ul and actually get those elements back into the viewport.

However, to quickly fix your issue, you need to clear your content so it won’t be affected by the positioning going on in your nav. See below.

#content {
    clear: left;
}