How to order rows (or divs) vertically using blueprint css?

Question

Hi,

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)

Answer 1

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:

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

They are basically same as my answer(upper heights of divs are known) or use JS to re-order them.

Answer 2

you should be able to use absolute positioning and block on any div to put them wherever you like on the page.

for instance, take the code:

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

to make bar appear above foo, if foo is 100px, use the following:

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