Text going over footer

Asked Mar 26 '18 at 15:21

Active Mar 26 '18 at 15:21

Viewed 27 times

I have a little problem on my site, the text from the content div is going over the footer.

HTML:

<div class="content">
test
</div>
<div class="footer">
<font size="2px">
  <p>text</p>
  <hr color="red">
  <p>text2</p>
  <p>tex3</p>
  <p>E-mail: <a href="mailto:text4?" target="_top">text4</a>; <a href="mailto:text5?" target="_top">text5</a>; <a href="mailto:text6?" target="_top">text6</a></p>
  <p><a href="website">website</a></p>
  </font>
</div>

CSS:

.content{
padding-top : 121px;
position: absolute;
width : 100%;
display:inline-block;
}
.footer {
   display: inline-block;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}

If I write a lot of text, with <br/> included, it goes over the footer. Thanks a lot for helping!

asked Mar 26 '18 at 15:21

system32

why `position:absolute` ....? – Bhuwan Mar 26 '18 at 15:24
Should I change it to fixed? – system32 Mar 26 '18 at 15:24
you will need to set a z-index for the footer that is higher than the content but I wouldn't use absolute positioning - there are many better ways to do a sticky footer – Pete Mar 26 '18 at 15:24
can you remove the position: absolute; display: inline-block; from both i think it should fix the issue – andrew s zachary Mar 26 '18 at 15:31
@andrewsaeed, thanks, lol, I'm so stupid sometimes – system32 Mar 26 '18 at 16:19

Text going over footer

0 Answers0