Search code examples
cssxhtmlstylesheetmarkup

Position H1 below H2 on Page, but above it in Markup

I have some HTML Code:

<html>
<head>
<title>css test</title>
<style type="text/css">
.box{width:100%;float:left;background:red}
</style>
</head>
<body>

<h1>Title To Appear Below Div on Page</h1>

<div class="box">
    <h2>This is a Heading 2</h2>
</div>


</body>
</html>

As you can see in the Markup, the H1 is above the DIV.

However, I was wondering if it's possible to position this below the DIV when the user visits the web page.

Chances are the .box div will be a different height with every page refresh (it holds random text snippets).

Is it possible to place the H1 below the DIV on the page no matter the height of the DIV?

Thank you.

Solution

  • Ok, guys, here's the solution :)

    You need to use display: table-caption property on the header and caption-side: bottom on its container.

    Here's the basic markup:

    <div class="wrap">
    <h1>header</h1>
    <div class="box">lorem ipsum</div>
</div>​

    and CSS:

    h1 { 
    display: table-caption;
}
.wrap {
    display: table;
    caption-side: bottom;
}
.box {
    display: table-row;
}

    And here's jsfiddle http://jsfiddle.net/rjtyn/4/

    Should work in ie8+ and other current browsers.