Width en % teniendo en cuenta los paddings

elfeme · #1 (**permalink**) 06/04/2012, 19:51

Bueno gente, aver si me pueden ayudar con esto que no tengo ni idea como solucionarlo.
La cosa es que tengo un wrapper de 800px de width (width: 760px; padding: 20px;) y dentro tengo otra div y quiero que esta última ocupe el 100% del espacio que tenga disponible, por lo que deberia de usar 760px, pero al parecer no toma en cuenta el padding y ocupa 800px.
La pregunta entonces sería como hago para que ese width: 100% sea teniendo en cuenta los paddings?

GRACIAS.

pitufoweb · #2 (**permalink**) 06/04/2012, 20:14

No tendrías por que tener problemas. Lo mas probable es que no lo estés haciendo bien.

Muestra el código HTML y CSS.

Saludos

elfeme · #3 (**permalink**) 06/04/2012, 20:17

Bueno este es el código

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="wrapper">
        <div id="logo"></div>
        <div id="login">
            <form action="" method="post">
                <input type="text" name="user" value="Usuario"/>
                <input type="password" name="pass" value="Password"/>
                <input type="submit" name="submit" value="Ingresar"/>
            </form>
        </div>
    </div>
</body>
</html>

Código CSS:

Ver original/* margin & padding reseting */
* { 
    margin: 0; 
    padding:0;
}
 
/* general */
body {
    background: transparent url('images/bg.gif');
}
 
/* wrapper */
#wrapper {
    width: 760px;
    min-height: 460px;
    background: #DDDDDD;
    filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#dddddd'); /* fucking ie */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd)); /* web-kit browsers */
    background: -moz-linear-gradient(#fff, #ddd); /* firefox 3.6+ */
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 100px auto 0 auto;
    padding: 20px;
}
 
/* logo */
 
/* login */
#login {
    width: 100%;
    height: 100px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
}

pitufoweb · #4 (**permalink**) 06/04/2012, 20:24

A simple vista se puede ver el "error".

#login tiene 100% de ancho mas 20px de padding.

Simplemente quita/borra width: 100%.

Ejemplo:

#login {
height: 100px;
background: #fff;
border: 1px solid #ddd;
padding: 10px;

}

Saludos

elfeme · #5 (**permalink**) 06/04/2012, 20:35

Algo tan estupido y nunca me di cuenta que trabajaba de esa forma. Muchas gracias ;)

Cierren el thread.