divs: porque al usar padding--se salen los hijos?

Bien agradeceros la paciencia ya que me imagino que una cosa tan sencilla se abrá respondido miles de veces....

Bien cuando quiero incluir diversos divs... por ejemplo como hijos, si uso padding.. en firefox... estos se me escapan por la parte derecha , resumiendo que en vez de aplicarse "padding", parece mas bien como si fuera un "position", el cual me recorre todo el div en vez de enmaquetarmelo dentro del div padre.

Un saludo, acepto links a otras respuestas dadas..

Será mejor que comprendas mejor el modelo de caja en CSS. Aquí está explicado muy bien.
Espero que te ayude.

sip, eso lo tengo claro ..
uhmm pondre el codigo de ejemplo.. uff pero se me ha hecho tarde mañana lo colgaré

En lo personal, evito utilizar el padding, ya que tiene diferentes comportamientos en los navegadores. Hasta el momento me ha bastado con el margin.

Nononono, Darel... no me parece para nada acertado dejar de usar una propiedad tan útil como es padding. Lo que si hay que saber es el comportamiento de este:
* En Firefox, Opera, y demás navegadores c00l que respetan los estandares, si un div o un elemento con display:block tiene un ancho establecido, el padding expandirá el div o elemento, por lo tanto lo común es usar la siguiente "ecuacion":

Código :

ancho= ancho_requerido - (padding * 2)

y explicado: El ancho que se le adiciona a un div con el padding, es equivalente a dos veces la medida del padding especificado (pues hay padding tanto al lado derecho como al izquierdo), asi que solo le restamos ese valor al ancho que queremos.

Pongamos el ejemplo de dos divs, el contenedor y el hijo. Los dos tienen un ancho y alto definido e igual. Si le añadimos padding al padre, este se expandirá mas alla de su ancho ya definido, dejando espacio entre si, y su hijo. Ahora, si le añadimos un padding al hijo, este aun se ve afectado por el padding del padre, pero ahora que tiene su propio padding, se expande. Si se expande hasta alcanzar un ancho mayor al de su padre, pueden pasar dos cosas:

• En los navegadores que respetan al menos algunos estandares del w3c, incluidos Firefox, Opera, Internet Explorer 7, etc, los hijos "desbordan" al padre, es decir, se ven por afuera de su recuadro
  
• En los navegadores que irrespetan el modelo de caja oficial (como Internet Explorer 6), el padre se expande para abarcar a los hijos.
  

Por lo visto, tu problema es que quieres que en todos se vea como en IE6... entonces lo que debes hacer es agrandar el contenedor, usando la formula antes vista, y tadan, problema resuelto.

Saludos

gracias Lunatic Lycanthrop,


...me lo reelere detenidamente y hare pruebas .....