Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/06/2011, 00:12
Avatar de McBlink
McBlink
 
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 18 años, 1 mes
Puntos: 23
Divs y ancho en porcentaje

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
  1. #barra_lateral{
  2.     width:10%;
  3.     min-width:175px;
  4.     max-width:200px;
  5.     height:500px;
  6.     float:left;
  7. }
  8. #contenido {
  9.     width:90%;
  10.     height:auto;
  11.     min-height:500px;
  12.     float:left;
  13.     background-color:#FFF;
  14. }

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <style type="text/css">
  6. html, body {
  7.     padding:0;
  8.     margin:0;
  9.     height:100%;
  10. }
  11. #barra_lateral {
  12.     width:10%;
  13.     min-width:175px;
  14.     max-width:200px;
  15.     height:500px;
  16.     background-color:#000;
  17.     float:left;
  18. }
  19. #contenido{
  20.     width:90%;
  21.     height:auto;
  22.     min-height:500px;
  23.     float:left;
  24.     background-color:#CCC;
  25. }
  26.  
  27. </style>    
  28. </head>
  29.  
  30.  
  31. <div id="barra_lateral">
  32. </div>
  33. <div id="contenido">
  34. </div>
  35.  
  36. </body>
  37. </html>


Toda ayuda sera agradecída.. Saludos y Gracias