Mi sitio web se descuadra al redimencionar ventana

[daniartavia]

Buenas tardes compañeros...

Una vez mas teniendo problemas al trabajar con porcentajes..
Me han pedido (para una nueva pagina de hosting de archivos) que les haga un diseño, me pidieron una combinacion del estilo de Mega con Mediafire y Dropbox...
La cosa es que lo tengo hecho, pero tengo un problema (y por lo que ví Kim (El de Mega) tambien lo tiene)...
La cosa es que he trabajado con porcentajes para que el diseño se vea en pantallas de todos los tamaños, el diseño se divide practicamente el 3 partes, una columna que va a la izquierda con un height del 100% y un width del 20%, con eso no hay problema, todo se bien..
Tambien tiene un nav, donde va el logo y otras cosa que tiene un height del 20% y un width del 80%
y una "desktop" donde van los iconos de los archivos..
Si cargo la pagina no hay problema, pero si redimenciono la ventana se descuadra, el nav se encoje (no respeta ni el min-heigth) y los iconos en el desktop (.cont_a) se descuadra todo..

Capturas:

Como se ve mi diseño bien:
[img=http://webcr.tk/subidas/2.png]

Como se ve cuando encojo la pantalla:
[img=http://webcr.tk/subidas/3.png]

Como se ve Mega (cuando se encoje la pantalla):
[img=http://webcr.tk/subidas/1.png]

Como se ve MediaFire (Como quiero que se vea):
[img=http://webcr.tk/subidas/4.png]

Pues acá el problema es que ocupo que se acomode al tamaño de la pantalla...

Acá les dejo mi code..

CSS:

Código:

.cont_a {
	margin-top: 5%;
	margin-left: 20%;
	width: 80%;
	height: 90%;
	min-width: 900px;
	min-height: 900px;
	background: #FFF;
	position: fixed;
	overflow: auto;
}

.archivo {
	width: 128px;
	height: 160px;
	background: #FFF;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: inline-block;
	border-radius: 10px;
	border: 1px solid transparent;
	position: static;
}

header {
	width: 80%;
	height: 100px;
	min-height: 90px;
	position: fixed;
	float: right;
	margin-left: 20%;
	background: #000;
}

index.html

Código:

<div class="cont_a">
	<div class="archivo carpeta"><p>Carpeta</p></div>
	<div class="archivo carpeta"><p>Carpeta</p></div>
	<div class="archivo carpeta"><p>Carpeta</p></div>
	<div class="archivo carpeta"><p>Carpeta</p></div>
	<div class="archivo compressed"><p>Nombre.zip</p></div>
	<div class="archivo exe"><p>Nombre.exe</p></div>
	<div class="archivo file"><p>Nombre.dll</p></div>
	<div class="archivo music"><p>Nombre.mp3</p></div>
	<div class="archivo image"><p>Nombre.png</p></div>
	<div class="archivo video"><p>Nombre.avi</p></div>
	<div class="archivo text"><p>Nombre.txt</p></div>
	<div class="archivo html"><p>Nombre.html</p></div>
	<div class="archivo css"><p>Nombre.css</p></div>
	<div class="archivo pdf"><p>Nombre.pdf</p></div>
	<div class="archivo word"><p>Nombre.doc</p></div>
	<div class="archivo excel"><p>Nombre.csv</p></div>
	<div class="archivo point"><p>Nombre.ppt</p></div>
	<div class="archivo psd"><p>Nombre.psd</p></div>
	<div class="archivo fireworks"><p>Nombre.fw</p></div>
	<div class="archivo illustrator"><p>Nombre.ai</p></div>
	<div class="archivo flash"><p>Nombre.swf</p></div>
</div>

Gracias y disculpen!

[alzacon]

¿Y el código del nav?

Como quieres que se ajuste el contenedor de los archivos si le estas forzando a tener un ancho minimo.

[nico123]

Hola!!. Lo que no entiendo es porque en el contenedor pusiste primero height y despues min-height

Código CSS:

.cont_a {
    margin-top: 5%;
    margin-left: 20%;
    width: 80%;
    height: 90%;
    min-width: 900px;
    min-height: 900px;
    background: #FFF;
    position: fixed;
    overflow: auto;
}
 

Prueba asi:

Código CSS:

.cont_a {
    margin-top: 5%;
    margin-left: 20%;
    width: 80%;
    height: 90%;
    max-width: 900px;
    max-height: 900px;
    background: #FFF;
    position: fixed;
    overflow: auto;
}
 

Esa es una primera opcion, yo nunca tuve que hacer que un div se "ajuste al tamaño de la ventana", por eso es que no se me ocurre nada mas, pero probare!!!

Una cosa mas, ¿Que sistema operativo usas?

[pzin]

Como han dicho falta código. O cuelga el sitio en algún lugar para verlo in situ.

Iniciado por nico123

Una cosa mas, ¿Que sistema operativo usas?

Yo veo por ahí el logo de Ubuntu.