Capas (DIV): padding vs float

auttranadhie · #1 (**permalink**) 26/12/2011, 14:03

Hola a todos:

Lo primero: reconozco que este es más un problema de etiqueta HTML, pero como afecta a su estilo he resuelto poner el mensaje en este foro. Por favor, si los moderadores lo consideran más adecuado para otro lugar, les ruego hagan lo propio. Muchas gracias.

Estoy haciendo pruebas de maqueta con capas (DIV) y al aplicar el estilo en donde aparecen los atributos float y padding, si este último aparece en la declaración del estilo la segunda capa (véase código) aparece en la siguiente línea en vez de continuarse.

Nada como el código para ilustrar el problema:

Código HTML:

<html>
<head>
</head>
<body>
<div id=div_header style="width:1000; clear: both">
<div id=div_header_left style="background-color: brown; width:800; height:100; float: left; padding: 5px">
IZQUIERDA
</div>
<div id=div_header_right style="background-color: brown; width:200; height:100; float:left; padding: 5px">
DERECHA
</div>
</div>
</body>
</html>

Por favor, me gustaría que alguien me informara sobre si existen problemas con la coexistencia de dichos atributos y/o si hay alguna solución.

Muchas gracias por adelantado y felices fiestas para todos.

IsaBelM · #2 (**permalink**) 26/12/2011, 14:15

el problema es que los bloques suman 1000px + el padding de cada uno (5px). por lo tanto #div_header ha de tener un width de 1020px

por cierto usa un doctype, las comillas y las unidades

auttranadhie · #3 (**permalink**) 26/12/2011, 14:30

Hola:

Muchas gracias por la pronta y útil respuesta.

Un saludo.

ZoroRoronoa · #4 (**permalink**) 26/12/2011, 14:48

Cita:

el problema es que los bloques suman 1000px + el padding de cada uno (5px). por lo tanto #div_header ha de tener un width de 1020px

por cierto usa un doctype, las comillas y las unidades

Se supone que el ancho es 1000.
El padding agrega 5px a lado DERECHO Y AL IZQUIERDO.
entonces sumamos 800 + 5 + 5 = 810px)
el otro DIV seria igual 200 + 5 +5 = 210px

los otros 5 y 5, son de arriba y abajo, y ese modificaria la altura.

Si tu contenedor mide 1000, y ponias 800 + 200, estaria bien.

pero al momento de aplicar el padding,estos cambian sus anchuras a 810 y 210, por lo que no caben, y es por eso que uno de desplaza hacia abajo

Saludos.

IsaBelM · #5 (**permalink**) 26/12/2011, 16:05

Cita:

Iniciado por ZoroRoronoa

Cita:

Iniciado por IsaBelM

el problema es que los bloques suman 1000px + el padding de cada uno (5px). por lo tanto #div_header ha de tener un width de 1020px

por cierto usa un doctype, las comillas y las unidades

Se supone que el ancho es 1000.
El padding agrega 5px a lado DERECHO Y AL IZQUIERDO.
entonces sumamos 800 + 5 + 5 = 810px)
el otro DIV seria igual 200 + 5 +5 = 210px

javierflti · #6 (**permalink**) 05/10/2012, 00:33

eso se podría solucionar con porcentajes en lugar de px no?
Sería más fácil hacer las cosas.

pzin · #7 (**permalink**) 05/10/2012, 01:20

javierflti si usas porcentajes para la anchura y para el padding, te quedas en las mismas. O bien ajustas manualmente o bien introduces otras capas interiores y haces el padding ahí. Alternativamente se puede usar box-sizing:border-box —CSS3— para alterar el modelo de caja y así ni padding ni border se suman al ancho/alto del elemento.