width: 100% + padding

cfoch · #1 (**permalink**) 08/01/2012, 08:30

Hola... desde ayer trato de aprender CSS y me he encontrado con un problema al darle a un div un ancho (width) de 100% con un padding de 10px, por ejemplo.

Código HTML:

Ver original<html>
<head>
    <style type="text/css">
        #contenedor {
            background: red;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        #cabecera {
            background: orange;
            width: 100%;
            padding: 10px;
            height: 80px;
            float: left;
            
        }
    </style>
</head>
<body>
    <div id="contenedor">
        <div id="cabecera">
            Cabecera
        </div>
    </div>
</body>
</html>

Por ejemplo ahi la cabecera (barra naranja) sobresale del div contenedor debido al padding, ¿cómo puedo hacer para que el padding esté incluido con el 100% de ancho que le doy?
Graicas de antemano

browen · #2 (**permalink**) 08/01/2012, 09:43

a la cabecera le quitas la propiedad width y float y te debería funcionar

te dejo el ejemplo.
http://jsbin.com/aqalep

ryugen · #3 (**permalink**) 08/01/2012, 12:40

es que si el ancho es 100% (osea todo), si la agregas margenes interior se sobrepasa.
en todo caso
width:98%;
padding:1%;

Entonces 1%(padding izquierda) +98% (width) + 1%(padding derecha) = 100%.

Puedes ver bien el modelo de caja: http://www.w3.org/TR/CSS2/box.html

Para aprender más sobre el tema.

IXtremeLT · #4 (**permalink**) 08/01/2012, 13:36

Lo mejor esque no uses width 100% ya que por default tiene width: auto y este valor hace que ocupe todo el espacio sobrante sin salirse aunque le agregues padding o margin en el caso de width por que height solo se extiende conforme al contenido.
Tambien puedes colocar otro contenedor adentro de cabezera y a este le agregas el margin que le pones como padding a la cabezera y le quitas el padding.
O tambien puedes quitarle el width 100% y pones position:relative;left:0;right:0

ryugen · #5 (**permalink**) 08/01/2012, 14:14

Como cfoch utiliza elementos flotados (float:left) es necesario que especifique el ancho para el elemento. La tecnica del width:auto, solo funciona en elementos de bloques, sin float.

C2am · #6 (**permalink**) 08/01/2012, 17:53

Ahora si utiliza el 100% del ancho ¿es necesario el float?, mmm, en mi humilde opinión no, por lo que apoyo el no declarar explicitamente el width y dejarlo al auto que viene por defecto.
Es solo una opinión, luego cfoch decidirá.
saludos