Problem with a general layout - css

[Baxxter]

Hello,

I need help with something i think is quite easy to solve maybe for the real experianced ones. I am a webeditor, but still not professional, and experianced with all sort of css layouts etc. So it about this site: http://mbdbygg.zxq.net/ . I have never maked a background/layout like this before, and am considering some other way to achive how i want it, but i guess i wont need to do it all over.

So look at the site: http://mbdbygg.zxq.net/. When you open it in a normal fullscreen window it looks ok, and that is how it is suppose to look. When one minimize the window you can see that the pictures i nthe middle all moves outside the layout to the right on a white surface outside the wrapper! So does the links aswell. And the the "righttext" div moves to the left one. So what do i need to do for it not beeing like this. The divs - header, content, and footer are supposed to be fixed. Meaning there should be repeating the content and the foot and header, and not be pressed to the left like that. What do i need to do? I attach the css file as well. Thanks for any help!

*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    
    margin-right: auto;
    margin-left: auto;
	border: 1px solid #727272;
}
#header {
    height: 180px;
	background-color:#FFFFFF;
	background-repeat:repeat-x;
	border: 1px solid #727272;
	background-image:url(mbdbygg.gif);
	background-position:center;
	background-repeat:no-repeat;
}
			
#content {
		
	height: 800px;
	background-color:#605a5a;
	background-repeat:repeat-x;
	border: 1px solid #727272;
}

.lefttext {
	position:absolute;
	float:left;
	top:245px;
	left:40px;
	width:250px;
	height:400px;
	border: 1px solid #727272;
}

	.righttext {
	position:absolute;
	float:right;
	top:245px;
	right:40px;
	width:250px;
	height:400px;
	border: 1px solid #727272;
	}

#center {
	position:relative;
	
	top:60px;
	left:344px;
	width:800px;
	height:700px;
	border: 1px solid #727272;
}


	.meny {
	position:relative;
	font-family:Franklin Gothic Heavy, Arial;
	left:465px;
    top:12px;
	float:left;
	border: 1px solid #727272;
	}

	.meny li{
		display:inline;
		margin: 1px;
		
	}
	.meny ul li a{
				text-decoration: underline; 	
				color:#FFFFFF;
			}
			
			.bilder {
					position:relative;
					float:left;
					left:40px;
					top:60px;
					border: 1px solid #727272;
				}
				 .bilder img{
				  display: inline; 
				  border: 1px solid #4B678D;
				  }
				
				.thumbnail {
				width:165px;
				height:125px;
				margin:5px;
				border: 1px solid #4B678D;
				}

#footer {
	background-color:#FFFFFF;
	background-repeat:repeat-x;
	border: 1px solid #727272;
	margin:0 auto;
    height: 60px;
    clear: both;
}

div#footer p {
	font-size:0.6em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0;
	padding:5px;
}

[Baxxter]

Ok i atleast fixed the divs header, content and footer to stay put(i removed the margin-autos aswell and put only min-width:1060px. I also put a position relative on the side-textboxes. BUt the meny links and the pictures in the middle still go out of place. The meny goes many steps down when minimizing the window, and the pcitures goes INTO the right box, moving to the right with other words. What else i need to do? i attach the css code again as it is now:

*{
    margin: 0px;
    padding: 0px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
img {
    border: none;
}
#wrapper {
    min-width: 1060px;
    
	border: 1px solid #727272;
}
#header {
    height: 180px;
	background-color:#FFFFFF;
	background-repeat:repeat-x;
	border: 1px solid #727272;
	background-image:url(mbdbygg.gif);
	background-position:center;
	background-repeat:no-repeat;
}
			
#content {
		
	height: 800px;
	background-color:#605a5a;
	background-repeat:repeat-x;
	border: 1px solid #727272;
}

.lefttext {
	position:relative;
	float:left;
	top:65px;
	left:40px;
	width:250px;
	height:400px;
	border: 1px solid #727272;
}

	.righttext {
	position:relative;
	float:right;
	top:65px;
	right:40px;
	width:250px;
	height:400px;
	border: 1px solid #727272;
	}

#center {
	position:relative;
	
	top:60px;
	left:300px;
	width:750px;
	height:700px;
	border: 1px solid #727272;
}


	.meny {
	position:relative;
	font-family:Franklin Gothic Heavy, Arial;
	left:155px;
    top:12px;
	float:left;
	border: 1px solid #727272;
	}

	.meny li{
		display:inline;
		margin: 1px;
		
	}
	.meny ul li a{
				text-decoration: underline; 	
				color:#FFFFFF;
			}
			
			.bilder {
					position:relative;
					float:left;
					left:10px;
					top:-210px;
					border: 1px solid #727272;
				}
				 .bilder img{
				  display: inline; 
				  border: 1px solid #4B678D;
				  }
				
				.thumbnail {
				width:165px;
				height:125px;
				margin:5px;
				border: 1px solid #4B678D;
				}

#footer {
	background-color:#FFFFFF;
	background-repeat:repeat-x;
	border: 1px solid #727272;
	margin:0 auto;
    height: 60px;
    clear: both;
}

div#footer p {
	font-size:0.6em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0;
	padding:5px;
}

[Excavatorak]

Hello Baxxter,
For your .righttext not to overrun your #center, #wrapper's min-width should be more like 1350px or so.

Have a look at a very simple 3 column layout that does not use positioning.

[Baxxter]

Hello Baxxter,
For your .righttext not to overrun your #center, #wrapper's min-width should be more like 1350px or so.

Have a look at a very simple 3 column layout that does not use positioning.

Thank you, that fixed it! So it that a standard minimum for every browser and screens, for not the divs to go into each other?
You are saying i can do this without positions?