benmandv on "Responsive design"

Hi there
At the moment, I have my site set so the elements change relative to the browser window size, but I'd like to utilise the @media screen function to stop the whole site resizing if a window is smaller than 940px. I've had a mess about but I can't seem to get the desired effect. My knowledge of css is rather basic. Any help would be appreciated.

This is how my site is set out at the moment:

#wrapper {
	margin: 0 auto;
	padding-bottom: 60px;
	text-align: left;
	max-width: 100%;
}
#header {
	DISPLAY: none;
	margin: 10px auto 15px;
	min-height: 73px;
	padding: 35px 0 77px;
	position: relative;
	text-align: center;
}
#navigation {
	background: #f1f1f1; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fafafa, #f1f1f1);
	background: -o-linear-gradient(#fafafa, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#f1f1f1)); /* older webkit syntax */
	background: -webkit-linear-gradient(#fafafa, #f1f1f1);
	border-top: 1px solid #fff;
	left: 0;
	min-height: 29px;
	padding-top: 12px;
	top: 0;
	width: 100%;
	z-index: 999;

}
#navigation-frill {
	background: url(images/nav.png) 0 0 repeat-x;
	height: 9px;
	max-width: 100%;
}
#content {
	margin:  4.6em auto;
	max-width: 85%%;
}
#posts-wrapper {
	width: 73%;
	float: left;
}
#secondary,
#tertiary {
	background: #f1f1f1;
	float: right;
	max-width: 24%;
}
.wrapper {
	margin: 0 auto;
	max-width: 100%;
}

Cheers