El padding muestra barra de desplazamiento

ci2000 · #1 (**permalink**) 07/05/2009, 06:53

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

AlbertoGarcia · #2 (**permalink**) 07/05/2009, 07:25

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!

willyfc · #3 (**permalink**) 07/05/2009, 07:30

quita los anchos de 100% a #comentarios y #comentario, y a #comentarios coloca overflow:hidden, con eso bastará, no es necesario colocar un ancho.