Home/ Questions/Q 7892857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T06:58:21+00:00

Is there a common CSS layout technique for controlling the vertical source order of

  • 0

Is there a common CSS layout technique for controlling the vertical source order of a page?

For example, can I change this…

<container>
    <header></header>
    <content></content>
    <footer></footer>
</container>

…to this…

<container>
    <content></content>
    <header></header>
    <footer></footer>
</container>

…while still having the <header> appear at the top of the page, above the <content>?

In other words, I’d like to apply the techniques used for controlling horizontal source order, such as “One True Layout” and “Holy Grail“, to the vertical source order of the page.

This question asks essentially the same thing, but the responders didn’t seem to get what was being asked and the asker’s solution seems cumbersome.

I might get criticism for micro-optimizing, but Mega Menus and responsive design keep pushing my page content down further and further.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You cannot alter the source of a page with CSS. You can, to some mild degree, alter the HTML output, but not in this way.

    The order of elements in an HTML document has meaning. So typically it won’t make sense for your source to have a heading which comes after its related content. It is the order which defines that relationship in many cases.

    What you can do is use CSS techniques to lay out these elements visually so that they appear to be in different order.

    But their vertical order in HTML should be semantically logical.

    • 0