I have a floating left navigation menu. My trouble is that if I resize the browser text too big or shrink my window too small, the menu overlaps on top of the content. Is there a way to prevent this from happening? Drop the content below the menu, for instance?

The code:

#nav {
    width: 8em;
    float: left;
    position: fixed;
#nav a {
    display: block;
    text-decoration: none;
    padding: .5em 0;
    text-align: center;
#nav li {list-style-type: none;} 
#content {
    margin-top: 1em;
    float: right;
    width: 80%;

2 answers


Hmmmm . . . so I sort of fixed it. If I give the body a fixed width, then there is no overlap. However, now the user will have to scroll horizontally if the text is resized too large. And if you scroll horizontally, the fixed position menu comes with you. Is there a way to fix a menu's position vertically but not horizontally?

Answered almost 10 years ago by paracaudex

Why not have a margin or padding on the left of the content equal to the width of the nav in ems?

Answered almost 10 years ago by Tony Crockford