Home/ Questions/Q 7692775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T20:55:49+00:00

I have some HTML Code: <html> <head> <title>css test</title> <style type=text/css> .box{width:100%;float:left;background:red} </style> </head>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0