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

Question

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)

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

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.

edited May 23 '17 at 12:11

Community

1
1

answered Nov 02 '09 at 19:03

Andy Li

5,894
6
37
47

Hi Andy. Please see my edit => Your solution is not working if the content div is written below footer div for instance. – fabien7474 Nov 02 '09 at 19:13
May I know why the order of the divs can be inconsistent across pages in a single site? Moreover will you accept a JS solution? – Andy Li Nov 02 '09 at 20:52
The links you have given are exactly what I was looking for. However, I am surprised that it cannot be achieved without JS...until CSS 3 (see link http://www.w3.org/TR/2003/WD-css3-content-20030514/#move-to) – fabien7474 Nov 02 '09 at 21:30

score 0 · Answer 2 · answered Nov 03 '09 at 08:25

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;
}

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

2 Answers2