Using em to set up margins doesn't quite work

[delerious]

Please take a look at the following page:
If you are using IE: http://home.comcast.net/~delerious1/index2.html
If you are using Mozilla: http://home.comcast.net/~delerious1/index2_moz.html

I'm trying to have a navigation menu on the left, and content on the right. With my default browser setups, there is a little bit of whitespace between the navigation menu and the content area, which is what I want. But I would also like the user to be able to view the page with whatever text size he/she prefers, and that is where my page breaks. If I increase (in IE) or decrease (in IE or Mozilla) the text size, then the navigation menu all of a sudden overlaps with the content area. I'm using em to specify the left side of the content area, so I thought that would move the content area over the correct amount when the text size gets adjusted, but either I don't understand em or I am not doing it correctly.

I also thought that the fact that I am using images in my navigation menu might be screwing up the em, but that is not the case, as you can see here:

If you are using IE: http://home.comcast.net/~delerious1/index3.html
If you are using Mozilla: http://home.comcast.net/~delerious1/index3_moz.html

Any tips on how I can get this to work would be appreciated! Thanks!

[kedrhodes]

I don't use em very often, but I hope to add a little insight to the situation.

I'm sure you have a width set for your navigation. The problem comes in when the content exceeds the width, and therefor breaks the borders of the nav. You may be able to fix this by using the overflow tag. However, it the user makes the text so big, that it does break the borders, then the text will get cut off. This will happen when you try to cram a 150px amount of text into a 100px navigation.

I'm not sure I have been much help, but it's worth a shot.

[ray326]

Have you tried doing a float:right on the nav and a float:left on the content and setting the content width in ems?