Ciao a tutti,
ho creato un layout fluido a 2 colonne con footer in modo da avere il sito a piena risoluzione.
Il problema è che quando viene fatto il resize della finestra del browser, il div di destra va a capo nel momento in cui la colonna di sinistra raggiunge il min-width impostato.
Come faccio a fissare i div nelle loro posizioni?

Questo è il codice che sto usando.
HTML:
codice:
<body>
	<div id="container">
	  <div id="active">
		  <div id="interact"></div>
                  <div id="content"></div>
                  <div style="clear:both"></div>
          </div>
          <div id="footer"></div>
        </div>
</body>
CSS:
codice:
@charset "utf-8";
/* CSS Document */

@font-face { 
	font-family: OpenSans-Regular;
	src: url('OpenSans-Regular.ttf');
}


html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
} 

p{
	color: #333;
	font-size:12px;
	font-family:OpenSans-Regular;
	
}


#container{
	width:100%;
	height:100%;
	background-color:#CCC;
	margin:0;
}
#active{
 width:100%;
 height:92%;
 margin:0;
 background-color:#FFF;
}

#interact{
 background-color:#369;
 min-width:300px;
 width:25%;
 height:100%;
 float:left;
}
#content{
 background-color:#699;
 width:75%;
 height:100%;
 float:left;
}

#footer{
 width:100%;
 height:8%;
 background-color:#FFF;
}

Grazie!