Foros del Web » Creando para Internet » CSS »

Divs y ancho en porcentaje

Estas en el tema de Divs y ancho en porcentaje en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/06/2011, 00:12
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 10 años, 6 meses
Puntos: 22
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
  #2 (permalink)  
Antiguo 08/06/2011, 07:17
Avatar de inieva  
Fecha de Ingreso: noviembre-2009
Ubicación: Argentina
Mensajes: 34
Antigüedad: 7 años, 6 meses
Puntos: 18
Respuesta: Divs y ancho en porcentaje

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!
__________________
http://www.ignacionieva.com.ar

Última edición por inieva; 08/06/2011 a las 07:35
  #3 (permalink)  
Antiguo 08/06/2011, 08:16
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 10 años, 6 meses
Puntos: 22
Respuesta: Divs y ancho en porcentaje

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

Saludos!

Etiquetas: ancho, divs, porcentaje
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:57.