Place element H1 below H2 on the webpage, but keep it positioned above H2 in the underlying

Question

Place element H1 below H2 on the webpage, but keep it positioned above H2 in the underlying

I have a snippet of 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>

Looking at the code, the H1 element is positioned above the DIV.

Can the H1 element be placed below the DIV when the webpage is accessed by the user?

Considering that the height of the .box div varies on each page load (due to random text content), is there a way to consistently position the H1 below the DIV?

Any insights on how to achieve this would be greatly appreciated.

css xhtml stylesheet markup

Answer 1

Answer №1

Hey everyone, I've got the solution for you!

To achieve the desired layout, make sure to apply the display: table-caption property to the header element and set caption-side: bottom on its container.

Here is a simple example of the HTML structure:

<div class="container">
    <h2>Heading</h2>
    <div class="content">Lorem ipsum dolor sit amet</div>
</div>

And the corresponding CSS:

h2 { 
    display: table-caption;
}
.container {
    display: table;
    caption-side: bottom;
}
.content {
    display: table-row;
}

Feel free to check out the demonstration on jsfiddle http://jsfiddle.net/abc123/7/

This should be compatible with IE8+ and other modern browsers.

Answer 2

Hey everyone, I've got the solution for you!

To achieve the desired layout, make sure to apply the display: table-caption property to the header element and set caption-side: bottom on its container.

Here is a simple example of the HTML structure:

<div class="container">
    <h2>Heading</h2>
    <div class="content">Lorem ipsum dolor sit amet</div>
</div>

And the corresponding CSS:

h2 { 
    display: table-caption;
}
.container {
    display: table;
    caption-side: bottom;
}
.content {
    display: table-row;
}

Feel free to check out the demonstration on jsfiddle http://jsfiddle.net/abc123/7/

This should be compatible with IE8+ and other modern browsers.

Answer 3

Answer №2

In case the design of the page is static and unchanging, you have the option to utilize absolute positioning for this task. Ensure there is ample white space below the "box" element and apply absolute positioning to the H1 tag. If the height of the "box" element varies, there is a possibility that the H1 tag may overlap with other text. In such extreme scenarios, resorting to JavaScript for dynamically calculating the position is always an option.

It's all akin to trying to scratch your left ear with your right hand.

Answer 4

In case the design of the page is static and unchanging, you have the option to utilize absolute positioning for this task. Ensure there is ample white space below the "box" element and apply absolute positioning to the H1 tag. If the height of the "box" element varies, there is a possibility that the H1 tag may overlap with other text. In such extreme scenarios, resorting to JavaScript for dynamically calculating the position is always an option.

It's all akin to trying to scratch your left ear with your right hand.

Place element H1 below H2 on the webpage, but keep it positioned above H2 in the underlying

Answer №1

Answer №2

Similar questions

Make a line break occur automatically after every 7 divs are displayed

Tips for creating the X Mark using SVG and CSS

What's the key ingredient I need to add for a dropdown navigation menu?

Retrieve and modify the various elements belonging to a specific category

The presence of a display block property within a div contained inside an li element results in extra whitespace

Issue with iPhone CSS displaying differently on mobile devices

Ensure that the sidebar in your React application occupies the full height of the page, regardless of the presence of scrolling

Leveraging the :checked state in CSS to trigger click actions

Building a unique mobile number input box with country code in HTML

Getting the value of a CSS variable under <script> in Vue.js

Customizing the Navigation Border-Bottom in WordPress

Adjust the height of the tabs bar in the Guake terminal

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

Which web browsers are compatible with the input attribute "multiple"?

Guide to aligning a div element along the right edge of the webpage

Move the scroll bar outside of the div and set it to automatically overflow

Tips for incorporating shapes and decorative elements into your page design effectively

Is it important to position elements based solely on the parent container?

What’s the best method for enclosing a table and text within a div?

SVG Opacity Transitions seem to ignore the constraints of CSS rules and bounce chaotically beyond their designated boundaries