Comment commander des lignes (ou divs) verticalement en utilisant blueprint css?

Question

J'ai le code html suivant (dans l'ordre donné)

<div id="content">...</div> 
<div id="footer">...</div> 
<div id="header">...</div> 

Et bien sûr, je veux afficher la partie d'en-tête en haut suivi de la partie de contenu, puis suivi par le pied de page. Comment puis-je faire cela avec un code CSS en utilisant blueprint?

P.S. : La partie de contenu est écrite en premier pour être plus favorable au SEO

EDIT: la solution devrait fonctionner dans n'importe quel ordre les sections div sont écrites. Par exemple, le div "content" pourrait être écrit dans le fichier XHTML APRÈS le div "footer" ... mais je veux toujours avoir le pied de page affiché sous le contenu (dont la hauteur est inconnue puisque selon le contenu)

Answer 1

Je ne sais pas si blueprint fournit cette fonction. Mais cela peut être fait facilement en simple CSS.

Je suppose que la hauteur de l'en-tête est fixe, disons 100px.

#header { 
    height:100px; 
    position: absolute; 
    top: 0px; 
} 

#content{ 
    padding-top:100px; 
} 

Mise à jour:

Je viens de trouver deux questions similaires:

• CSS layout, use CSS to reorder DIVs
• CSS positioning div above another div when not in that order in the HTML

Ils sont essentiellement identiques à ma réponse (hauteurs supérieures de divs sont connus) ou utilisez JS pour les ré-ordonner.

Answer 2

vous devriez être en mesure d'utiliser le positionnement absolu et bloquer sur n'importe quelle div pour les placer où vous voulez sur la page.

par exemple, prendre le code:

<div id="foo"></div> 
<div id="bar"></div> 

pour faire bar apparaissent au-dessus foo, si foo est 100px, utilisez ce qui suit:

#bar{ 
    top:100px; 
    left:0px; 
    position:absolute; 
    display:block; 
}