Div con posicion absoluta

[lizfranco]

Hola todos.
Tengo un problema de posicion que no se como sea la mejor manera de solucionar.
Tengo este codigo:

Código HTML:

div#content { border:1px solid #000; width:700px; position:absolute; margin-top:50px; text-align:center;}
div#footer { border:1px solid #FF0000; width:700px; }

Código HTML:

<div id="content">Contenido de la pagina</div>
<div id="footer">Pie de pagina</div> 

Lo que quiero tener es el div content y abajo el div footer.
Y lo que me muestra es el div footer arriba y el div content si lo ubica bien.

Se que esto pasa porque al div content le tengo position:absolute. No puedo quitarsela porque es un diseno ya hecho (lo que pongo es un ejemplo).

Hay alguna manera de ubicar la info abajo de un div con posicion absoluta? no se que ponerle al div footer para que se ubique debajo

Gracias de antemano,
Liz

[axiertxo]

Cambia el codigo html por este

<div id="content" style="margin:0px;">Contenido de la pagina</div>
<br>
<div id="footer" >Pie de pagina</div>

Saludos

[lizfranco]

Gracias axiertxo,
Si, efectivamente queda en el orden que lo necesito, primero el contenido luego en pie de pagina.
Pero como dije este es un ejemplo, se supone que en el div content va texto. Si hago mas renglones de contenido el div footer permanece en el sitio.

[axiertxo]

Vale!! ahora entiendo mejor lo que te pasa mir asi no peudes cambiar el css haz lo siguiente en el HTML

<div id="content" style="position:relative;">Contenido de la pagina</div>
<div id="footer">Pie de pagina</div>

Asi le decimos a la capa de contenido que sea relativa. Como el estilo que prevalece es el mas cercano(en este ccaso aplicado al mismo objeto) la posicion la tomara relativa que es lo que tu querias.

SALUDOS