Design collapsing in a small browserwindow.

I know this is more of a css-matter than an actual wordpress one, but i’m so puzzled and can’t find help elsewhere. I’m working on this layout, but when i view it in a smaller browser it simply collapses. I guess this is pretty basic, but I’m unable to find a fix anywhere, the relevant css looks like this:

.container{
	width:950px;
	margin:0 auto;
	position:relative;
	left:-35px;
	top:30px;
}

#header{
	background-image:url(images/header.jpg);
	padding-top:116px;
	border: solid 1px #b88e52;
}

#logo{
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	width:292px;
	height:119px;
	position: absolute;
	right:84px;
	top: 54px;
}

#logo h1{
	margin:0px;
	display:block;
	text-indent:-9999px;
}

ul#menu{
	margin:0px;
	padding:0px;
	position: absolute;
	left:1px;
	top: 97px;
	width: 609px;
}

ul#menu li{
	display:inline;
	margin-left: 56px;
}

Any way to prevent this?

Thanks in advantage.