[SOLUCIONADO] Div que no conozco el alto

[rapuig]

Hola, tengo un header con width=100% (ancho total de la pantalla) el cual contiene una img con width=100% también pero no "conozco" su height ya que va a depender del ancho por lo tanto el contendor que se encuentra debajo de este por las posiciones que tienen según la resolución a veces me queda por encima del header. Como puedo solucionarlo sin colocar un ancho fijo, ya que un margin-top no puedo ponerle porque como dije antes no conozco la altura del header.

HTML:

Código HTML:

<header>
   <img src="img1" />
</header>
<section id=wrapper>

</section> 

CSS:

Código:

header{
	width:100%;
	position:fixed;
}
header img{
	width:100%;
}
#wrapper{
	width:960px;
	margin:0 auto;
}

Muchas gracias!

[pzin]

Si no especificas ninguna altura y esta va a depender de la altura de la imagen, con no especificar altura alguna la cabecera automáticamente tendría que adaptarse. A menos que haya algo más que hayas obviado.

[rapuig]

Hola, gracias por responder Bonez, la cabecera si se adapta automáticamente, mi duda es cómo hacer para que el wrapper o sea el contenedor que esta inmediatamente después del header quede siempre debajo de el sin importar la altura que tengo. Espero se entienda.

Gracias!

[pzin]

Ah ok ahora entendí.

No se puede, al menos no directamente con CSS. La razón es que al poner una posición fija ese elemento sale del flujo natural y realmente no está antes del contenedor, por lo tanto ningún otro elemento es afectado por su altura, anchura ni nada...

Puedes hacer alguna pirula, como crear otro header fantasma con el mismo contenido que el que flota y luego aplicarle opacidad. Es una chapuza en toda regla... xD

Lo más correcto sería usar JavaScript para tomar la altura de la cabecera y luego aplicarle un margen o un top al contenedor. Haciendo eso, tendría que tener en cuenta también qué vería un usuario sin JavaScript.