Why does my main content area not stop at the edge of the screen?

In my web site I am trying to lay out I am trying to get my page to have a left side sidebar/menu area with the main content area to the right. I want my main content area to stop at the right edge of the screen, so I tried to give the area a width: 100%, but this doesn't seem to work right. It seems to be 100% width, but then shifted to the right (and thus going off the side of the screen.

The code and result can be found at http://jsfiddle.net/KallDrexx/xmm开发者_运维百科SV/5/

How can I accomplish this to keep all the text in the page?

For your main-area, remove the width:100% and position:absolute, replace the left:160px with margin-left:160px and you're done.

It's because #main-area is set to 100% width, which will be 100% of the container (which is this case is body. So, it will be 100% of the page width. But because you're moving it left 160px, it's actual position is 100% of the body + 160px.

Does the layout need to be fluid? If not, you can just set the width of #main-area in pixels.

You can try to replace the: width: 100% with right: 0px of main-area.

Basically this tells that the right side of the box should be 0px to the left of the parent. Now the main-area is still able to scale with the page width.