Divs autoajustables sin ancho ni alto fijo en header

[g3kdigital]

Hola.

Pues como veo lo que necesitas básicamente te toca aprender mucho, pero fresco uno nunca termina de aprender.

Veras, no puedo responder todas tus dudas, primero empieza con algunas y luego vemos la evolución de tu proyecto.

Por ejemplo:

1) El problema de los margenes es conocido (sino me equivoco) como desbordamiento y es debido a que cada navegador interpreta a su manera el ancho de las cajas, por defecto.

Algo que soluciona esto es un "reset.css" que es un archivo que deberás descargar y linkear al head antes de la hoja de estilos personal. Yo recomiendo (e igual lo hacen en desarrolloweb) "normalicer.css" porque lo uso y me evita muchos inconvenientes.

Sí no eres amante del código ajeno, puedes empezar haciendo múltiples pruebas en diferentes navegadores hasta que des tu misma con el resultado ideal, obviamente esta es la solución a largo plazo.

También puedes probar con una regla css llamada "box-sizing" esta es con el fin de evitar muchas veces este problema. Yo [URL="http://codepen.io/g3kdigital/full/uDHtF"]aquí[/URL] hice una demo, sobre como funciona y [URL="http://codepen.io/g3kdigital/pen/uDHtF"]el código de la demo[/URL].

2) Centrado vertical, sino estas trabajando medidas porcentuales, lo primero que se me ocurre para centrar el contenedor, es colocandole al padre "header" un "padding: N% auto;" donde N es cualquier número, lo puedes, hacer con "em" que es también una medida relativa.

Y en cuanto a centrar el contenedor, creo que intentas lograr esta estructura: [URL="http://codepen.io/g3kdigital/pen/eiFrs"]http://codepen.io/g3kdigital/pen/eiFrs[/URL] la gracia es transformar los contenedores en "tablas" y a los elementos anidados en "celdas" o "filas". Sin embargo, no lo uso todavía en versiones reales porque su comportamiento hereda las mismas dificultades de cuando maquetabamos por tablas.