CODEWITHSUNDEEP
htmlcss
Fabian Amran
Fabian Amran

Reputation: 1311

H2 tag overlapping text

I spent the majority of my time off today trying to figure out why this h2 tag is overlapping with the text below it?

Here is the same scenario I am working with: code pen

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
    height: 64px;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}
<body>

<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>  
  
</body>

No matter what I do I just can't get the h2 tag to just take its own space rather than overlap on the text below it.

UPDATE: the reason why I set the class below to 64px is because I want to create a horizontal behind the h2 tag.

.sections-entry-title {
   height: 64px;
}

This is what I am trying to achieve, but if the title gets too long then the h2 tag over laps with the text below it. Should have posted this screen shot earlier - my mistake

Thanks

Upvotes: 1

Views: 1749

Answers (6)

Fabian Amran
Fabian Amran

Reputation: 1311

Well it turned out that all I needed to do was add a z-index value of -1 to .sections-entry-title h2, and create the horizontal line that is behind the h2 tag with pseudo:before.

Here is the code: 

.sections-entry-title h2 {
   border: 3px solid;
   border-radius: 50px;
   color: white;
   display: inline-block;
   padding: 20px 10px;
   background-color: #DD3333;

}

.sections-entry-title h2:before {
   content: '';
   position: absolute;
   left: 0;
   margin-top: 20px;
   transform: translateY(-50%);
   height: 3px;
   background: white;
   width: 100%;
   z-index: -1;
}

Also, thank you everyone for pointing me to the right direction.

@Chris I am keeping this in my code, thanks 

transform: translateY(-50%);

Upvotes: 0

David Wilkinson
David Wilkinson

Reputation: 5118

Your .sections-entry-title has a static height of 64px, remove this and it displays fine:

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}
<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>

EDIT: Updated to also include the bar in the background of the .sections-entry-title:

body {
  max-width: 600px;
  margin: auto;
}

.sections-entry-title h2 {
    border: 3px solid;
    border-radius: 50px;
    color: white;
    display: inline-block;
    padding: 20px 10px;
    background: #DD3333;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.sections-entry-title {
    text-align: center;
    margin: auto;
    border-bottom: 3px solid #bb3333;
    position: relative;
}
.sections-entry-title:after {
  position: absolute;
  display: block;
  height: 10px;
  background-color: #000;
  content: " ";
  top: 64px;
  z-index: -1;
  left: -40px;
  right: -40px;
}
div {
    display: block;
}


.width-80 {
    width: 100%;
    margin: auto;
    max-width: 900px;
    padding: 80px 10px 60px 10px;
}
<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div>

<div class="width-80">
text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p>
<p><b>Choose an option to get started</b></p>

</div>

Upvotes: 2

Chris
Chris

Reputation: 59511

You have set your section-entry-title to have a height of 64px. Remove it (or set it to auto) and it will work fine.

Codepen

.sections-entry-title {
    height: 64px; <------ remove or set 'auto'
}

Updated behavior

The following will add a vertically aligned horizontal ruler that goes through the h2 tag, as you described in the comments.

Codepen

To do this, you can use css :before and :after selectors to make a line to the left and right of the h2 respectively.

.sections-entry-title h2:before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: #bb3333;
  width: 100%;
}

.sections-entry-title h2:after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: #bb3333;
  width: 100%;
}

Then, just set your h2 to be positioned relatively with position: relative.

Upvotes: 0

Vijay Baskaran
Vijay Baskaran

Reputation: 939

Remove Height from class name .sections-entry-title or else make height as auto. because the height you specified is lesser than the content which u have.

Upvotes: 0

beerwin
beerwin

Reputation: 10327

Increase or remove the height style for your .sections-entry-title div.

You have a height: 64px style set on it.

By default, all elements have also an overflow: visible style which is causing the overlap.

Upvotes: 0

TheThirdMan
TheThirdMan

Reputation: 1522

It's parent .sections-entry-title has a height of 64px, which prevents the document flow from giving the h2 element the space it would need.

.sections-entry-title {
  height: auto;
}

Upvotes: 0

Related Questions