I have the following html code (in the given order)
<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>
And of course, I want to display the header part at the top followed by the content part and then followed by the footer. How can I do that with a CSS code using blueprint?
P.S. : The content part is written first to be more SEO-friendly
EDIT: the solution should work in whatever order the div sections are written. For instance, the div "content" could be written in the XHTML file AFTER the div "footer"...but I still want to have the footer displayed below the content (whose height is unknown since depending on the contents)
I don't know if blueprint provides this function. But it can be done easily in simple css.
I assume the height of header is fixed, say 100px.
#header {
height:100px;
position: absolute;
top: 0px;
}
#content{
padding-top:100px;
}
Update:
Just found two similar questions:
They are basically same as my answer(upper heights of divs are known) or use JS to re-order them.