CODEWITHSUNDEEP
htmlcssfooter
Nemoko
Nemoko

Reputation: 451

footer overlaps the content of the page

code: https://jsfiddle.net/Nemoko/m8vLprb6/11/

problem:

I try to put the footer to the bottom of the page. because when I have to scroll down(when I have a lot of content in the page) the footer is in the way:footer in the way but when I dont have to scroll. the footer is perfectly in placefooter not in the way

how do I fix this?

what I tried:

adding position:relative; in the body this however hides the footer somehow at the top of the page and margin-top does not work setting position:relative; in the footer shows it again, however than it somehow sticks to the top of the page

adding display:flex; flex-direction:column; min-height:100vh; in the body this makes the footer appear again

Upvotes: 0

Views: 77

Answers (2)

BleedingHandz
BleedingHandz

Reputation: 48

I see your problem - the solution is this change both the body and footer position to relative - also change flex-direction:row not sure why you had it as column, experimenting i assume, i also added a flexbox property to space around your content. justify-content:space-around;

what i recommend further is reading this pages when you get a change, will help you with positioning and use of div/ boxes a bit better.

but in simple terms position:absolute doesn't move.

https://developer.mozilla.org/en-US/docs/Web/CSS/position https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I'm also pretty new - so i understand where you at bro.

.content {


        left: 96px;
        top:200px;

        width: 1728px;

        position: relative;

        background-color: #0fa1cb;

        opacity: 0.9;

        color: #FFFFFF;
    }


.footer{
        left: 96px;
        bottom: 0;

        width: 1728px;

        position: relative;

        display: flex;

        background: linear-gradient(#0fa1cb,#000046);
        opacity: 0.9;

        flex-direction: row;
        justify-content:space-around;

Upvotes: 1

Austin737
Austin737

Reputation: 776

It looks like your biggest issue is that you are using absolute positioning on your content and footer sections. Setting position:absolute on an element removes it from the document flow. You would have a much easier time removing the absolute positioning from the content section and then setting position:relative on the Body element. I have always found it to be a best practice to use absolute positioning sparingly, and definitely not for large content sections that may contain an arbitrary amount of content.

Upvotes: 1

Related Questions