Responsive Webdesign 3 Spalten - Mix aus % und PX

[garfield853]

Hallo, ich habe da mal eine Frage:

Ich brauche ein 3 Spalten-Layout

  
<div class="wrapper">  
    <div class="menu">ddd</div>  
    <div class="content">dddd</div>  
    <div class="sidebar">ddd</div>  
</div>

Allerdings sollte MENU und SIDEBAR eine feste Breite haben und wenn der Browser sich nun "verkleinert" (Responsive Webdesign) sollte MIDDLE sich bis zum ersten MEDIA QUERIE verkleiner, prozentual. Ich hoffe ich konnte meine Frage verständlich erklären :) Ein ähnliches Verhalten sieht man auf http://www.smashingmagazine.com. Wenn man hier dern Browser verkleinert bleibt die rechte Seite daneben bis zum Media Querie

Kann mir dabei jemand helfen?

Meine derzeitige CSS ist

  
.wrapper {  
	overflow: auto;  
	max-width: 1470px;  
	margin: 0 auto;  
	background: #f2f1f1;  
	padding: 20px;  
}  
.menu {  
	width: 190px;  
	float: left;  
	padding: 10px;  
	border-radius: 0.625em;  
	background: #fff;  
	box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);  
}  
.content {  
	background: none repeat scroll 0 0 #fff;  
	border-radius: 0.625em;  
	box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);  
	float: left;  
	margin: 0 0 0 10px;  
	padding: 10px;  
	width: 64.0136%;  
}  
.sidebar {  
	background: none repeat scroll 0 0 #fff;  
	border-radius: 0.625em;  
	box-shadow: 0 0 0.625em 0.07em rgba(0, 0, 0, 0.05);  
	float: left;  
	padding: 10px;  
	position: relative;  
	margin-left: 10px;  
	width: 290px;  
}