Divs y ancho en porcentaje

McBlink · #1 (**permalink**) 08/06/2011, 00:12

Buenas Noches,
tengo un problema que no lo estoy pudiendo resolver con los anchos de dos divs.. nose i tendre que recurrir a JS o hay forma de solucionarlo con CSS.

El tema es el siguiente:

Código CSS:

Ver original#barra_lateral{
    width:10%;
    min-width:175px;
    max-width:200px;
    height:500px;
    float:left;
}
#contenido {
    width:90%;
    height:auto;
    min-height:500px;
    float:left;
    background-color:#FFF;
}

tengo una barra lateral al 10% de la pantalla y el contenido al 90%. Pero obviamente, si la resolución es muy chica, el 10% es muy poco, por lo tanto le pongo 175 de mínimo y 200 de maximo (para resoluciones muy grandes).

El problema viene cuando el 10% es mas chico que 175px. ya que le da de ancho 175px y el contenedor que tenia el 90% no entra y se muestra po debajo..

dejo el código completo para que se pueda comprobar mejor, nose si me explique bien..

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
html, body {
    padding:0;
    margin:0;
    height:100%;
}
#barra_lateral {
    width:10%;
    min-width:175px;
    max-width:200px;
    height:500px;
    background-color:#000;
    float:left;
}
#contenido{
    width:90%;
    height:auto;
    min-height:500px;
    float:left;
    background-color:#CCC;
}
 
</style>    
</head>
 
<body>
 
<div id="barra_lateral">
</div>
<div id="contenido">
</div>
 
</body>
</html>

Toda ayuda sera agradecída.. Saludos y Gracias

inieva · #2 (**permalink**) 08/06/2011, 07:17

En lugar de usar porcentajes yo lo resolvería dándole al lateral un ancho fijo y usando un margen izquierdo igual al ancho del lateral para posicionar el contenido.

Código:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    <style type="text/css">
    html, body {
        padding:0;
        margin:0;
        height:100%;
    }
    #barra_lateral {
        width:200px;
        height:500px;
        background-color:#000;
	float:left;
    }
    #contenido{
        margin-left:200px;
        height:auto;
        min-height:500px;
        background-color:#CCC;
    }
     
    </style>    
    </head>
     
    <body>
     
    <div id="barra_lateral">
    </div>
	
    <div id="contenido">
    </div>
     
    </body>
    </html>

Espero que te sirva.

Saludos!

McBlink · #3 (**permalink**) 08/06/2011, 08:16

Gracias Inieva ! nose si es lo mas correcto, pero como funcionar parece que funciona bien.
Ahi fué mi Karma

Saludos!