CODEWITHSUNDEEP
htmlcss
Markeee
Markeee

Reputation: 573

how to stop content from going behind absolute positioned element

Most of my content is inside a <main> element:

<main>
<h1>A nice big, long, long heading</h1>
<p>Lots of text</p>
</main>

main {
max-width:200px;
margin:0 auto;
padding:0 20px;
}

h1 {
position:absolute;
max-width:300px;
padding-right:20px;
}

This acheives this:

enter image description here

The heading is wider than the main column: it protrudes out of the right hand edge - exactly what I want.

However the text below the heading is displayed behind the heading (because the heading has been taken out of normal flow).

I don't know if the heading will be one or two lines or wrap on to more lines.

Is there a way to get the text beneath the heading to be displayed below the heading (not behind it): to respect the height of the heading (as if it was in normal flow)?

Upvotes: 0

Views: 1307

Answers (2)

Ekwonye Richard
Ekwonye Richard

Reputation: 11

Set the position of main to relative. You can remove max-width on h1

main {
    max-width:200px;
    margin:0 auto;
    padding:0 20px;
    position: relative;
}

h1 {
    position:absolute;
    padding-right:20px;
}

Upvotes: 1

syberen
syberen

Reputation: 679

Like this?

main {
max-width: 200px;
margin: 0 auto;
padding: 0 20px;
background: blue;
height: 300px;

}

h1 {
position: relative;
width: 300px;
padding-right: 20px;
background: red;
}
<main>
<h1>A nice big, long, long heading</h1>
<p>Lots of text Lots of textLots of textLots of textLots of textLots of textLots of textLots of textLots of text</p>
</main>

Upvotes: 2

Related Questions