CODEWITHSUNDEEP
htmlcsscss-positionfooter
GBF
GBF

Reputation: 29

Fix footer to bottom of page (no header)

I'm still learning CSS and I'm not too good yet at all, if you are able to find a fix for this could you provide an example for where I am to put the new CSS or removed. I've tried at least 30 different things now and couldn't find the one that works.

I have text centered in my screen no header but I want to force a second text to the bottom below that.

Here's a picture to help represent my setup: enter image description here

This is some of the code I got to center the text (I want to keep it as unaffected as possible so both the centered text and footer work just fine)

<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

Here's the CSS I got going:

.centered {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.footer {
  position:fixed; 
  bottom:0; 
  clear:both; 
  height:75px; 
}

Like I said the centered text works fine even when I adjust the page it still stays center, I just want to have a footer below that that will stay fixed to the bottom. Thank you for any that help much appreciated~

Upvotes: 1

Views: 65

Answers (2)

Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

Methord 1:

As per my knowledge(pardon if I'm wrong) you should have a relative to use an absolute. And as of the text which you want to center you can get it done by using the inner section you want to place it in. I've used padding because I don't have an inner-section here.

.centered {
text-align: center;
padding-top: 80px;
position: relative;
}

.footer {
position: absolute;
clear: both;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
<div class="centered">
    <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

Methord 2: You can also go through flexbox because it has less properties, easy to use and will be responsive.

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

You have already done it!

.footer {
    position: fixed;
    bottom: 0;
    clear: both;
    height: 75px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}


.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: fixed;
  bottom: 0;
  clear: both;
  height: 75px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
}
<div class="centered">
  <h1>Main text</h1>
</div>
<h3 class="footer">Sub text</h3>

Upvotes: 1

Related Questions