Foros del Web » Creando para Internet » CSS »

El padding muestra barra de desplazamiento

Estas en el tema de El padding muestra barra de desplazamiento en el foro de CSS en Foros del Web. Hola, al agregar el padding al div comentario me muestra la barra de desplazamiento horizontal dentro del div derecha. ¿Cómo puedo hacer para que no ...
  #1 (permalink)  
Antiguo 07/05/2009, 07:53
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Mensaje El padding muestra barra de desplazamiento

Hola, al agregar el padding al div comentario me muestra la barra de desplazamiento horizontal dentro del div derecha.

¿Cómo puedo hacer para que no aparezca dicha barra horizontal manteniendo el padding?

Código HTML:
</head>
<body>
        <div id="contenedor">
            <div id="izquierda">
              <p>Este es el texto de la izquierda</p>
            </div>
            <div id="derecha">
				<div id="comentarios">
					<div id='comentario' >Nuevo comentario</div>
		                        <p>Este es el texto de la derecha</p>
				</div>	 
            </div>
        </div>
</body>
</html> 
Código:
* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
}

#contenedor {
    width: 100%;
    height: 100%;
}

#izquierda {
    height: 100%;
    float: left;
    width: 200px;
    background-color: #f00;
    overflow:auto;
	
}

#derecha {
    height: 100%;
    background-color:#00FF99;
    overflow:auto;
}

#comentarios{
	background-color:#E7DFA0;
	height:100%;
	background-image: url(comienzo.gif);
	background-repeat: repeat-x;
	background-position: top;
	width:100%;
}

#comentario{
	background-color:#CCCCCC;
	padding: 10px 10px 10px 10px;
	text-align:center;
	width:100%;
}
Desde ya, muchas gracias por las respuestas.
Saludos
  #2 (permalink)  
Antiguo 07/05/2009, 08:25
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: El padding muestra barra de desplazamiento

Le estás diciendo a 'comentario' que ocupe todo el espacio de 'comentarios' y que además se expanda 10px. Haz que la suma de la caja sea 100%, por ejemplo:

#comentario{
padding: 5%;
width: 90%;
}

Así la suma del ancho y del alto será 100%. Haz una búsqueda en ggogle con 'modelo de caja css' y tendrás más información en el primer resultado. (me dicen que no puedo publicar mensajes)

Salud!
  #3 (permalink)  
Antiguo 07/05/2009, 08:30
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: El padding muestra barra de desplazamiento

quita los anchos de 100% a #comentarios y #comentario, y a #comentarios coloca overflow:hidden, con eso bastará, no es necesario colocar un ancho.
__________________
WFC
codigo82
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 10:59.