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


Tags: css,xhtml,blueprint-css

Problem :

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)



Solution :

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.


    CSS Howto..

    Symfony2 Form Type - how to set form CSS class as attribute?

    How to draw heart with text in middle?

    How to apply style rules that are tied to a model in AngularJS?

    How to make
    , , or list display tabular data as a table?

    How to implement color through css from dark to light? [closed]

    How to assign custom CSS to Sharepoint site

    IE8 only shows css content after event fired

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    .show() not working on page load

    CSS: How to put content between header and footer

    How to color a responsive table in Bootstrap?

    How to Click a div and have it change dimensions of other divs and then change back once clicked again

    HTML divs, how to wrap content?

    How to create a simple social sharing dropdown menu in CSS/HTML

    CSS Fixed width right, fluid left, right div is first in html. How do I keep left from collapsing

    How can I get the second line of text to hide and show on hover? CSS only

    How to overlay a play button over a thumbnail image using only CSS

    Images not showing in PhoneGap Build application

    How to add a .css to a .cshtml

    How to align a link icon after the text via CSS?

    How do you style Wordpress sub-menus with CSS?

    how to make an image “coming” to foreground

    How can I customise jquery loupe to have a circular lens?

    CSS - fluid design, how to correctly position right floats below the opposing element?

    How can I point out a specific location in Google Maps?

    How to add tabs or spaces to a textline with CSS?

    How to make responsive horizontal grids? [closed]

    How to move items to left inside a div?

    How to get Google menu buttons like styling using CSS

    How to style nested ID-elements in CSS/SASS