Resizing window hides my navigation sidebar

Question

I have a website. It is pretty simple, just a column of text in the middle and on the left of it a navigation column with links to my pages. When I resize my browser window while on my website, making the window smaller causes the column of text to cover the navigation column. While this isn't a problem on computers with widescreen monitors and high resolutions, it is a problem for some people, who load the page and find the text column already covering the navigation column because of the size of the window. How can I make my navigation column move with my text column when the window is resized, rather than not moving at all and becoming covered up when I resize the window?

The links are in one div, the text in a different div. Here is the css:

#links {
position: relative;
float: left;
left: 18em;
font-family: arial;
}
#content {  
position: relative;
font-family: arial, helvetica;
top: -4em;
width: 560px;

border-style: solid;
border-color: 36a2c1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: white;
margin-left: auto;
margin-right: auto;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}

Answer 1

I'm guessing your sidebar menu is absolutely positioned (css: position: absolute; right: 0;), which removes it from the normal document flow. There's not much you can do to keep it from sliding over top other content when the window's shrunk down, since it's not really "in" the document anymore.

The usual workaround is to put a min-width on the parent container, so that it won't shrink below a certain limit (css: min-width: 100px;). Of course, IE6 and older don't support min-width at all, but there's work around with 1px high invisible images, fixed-width content that can't be wrapped, etc...

Answer 2

try this piece of code. i just add floating to both divs link to left and content to right

#links {
position: relative;
float:left;
font-family: arial;
background-color:#171817;
width:100px;
height:300px;
margin-right:10px;
}
#content {  
position: relative;
float:right;
font-family: arial, helvetica;
top: -4em;
width: 560px;
height:300px;

background-color:#ffff12;

border-style: solid;
border-color: 36a2c1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
background-color: white;
margin-left: auto;
margin-right: auto;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
}