Footer is overlapping my content body

HTML & CSS
1

Hi,

My footer is overlapping my content body, it should be always stick on bottom and should not be overlap on my content body.

my full web page access:

http://www.acmearchitectural.com/sohail/ptpage1.html

your early reply appreciated…

Thanks

2

Clarification needed:

Is the black footer supposed to stick to the bottom of the browser window or the bottom of the scrolling page?

3

The whole black portion of the footer

4

Check one complete sentence. Only one, not both.

(1) The black footer is supposed to stick to the bottom of the browser window. It is always supposed to be at the bottom of the browser window even though there is little height left for other content.

(2) The black footer is supposed to be at the end of the page. It will become visible when the page is scrolled to the bottom.

1 Like
5

You didn’t reply to my answer on your other footer question so I’m loathe to spend more time on a similar question :frowning:

1 Like
6

check the last error reported here
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.acmearchitectural.com%2Fsohail%2Fptpage1.html

Not sure what you want the footer to actually do, but spare div tags don’t help things work.

7

Make sure that, if your footer is not inside your body tags, that you specify a “padding-bottom: <amount>px;” to your body that is the height of your footer. This does mean your footer needs to be fixed height. This will make sure that your body ends BEFORE the part where the footer starts.

This also does assume your footer’s set to “position:absolute;”.

8

Surely if the footer is not inside the body tags, the HTML is invalid and the footer should be moved.

9

If you just want a normal footer then add this:

.footer{position:static}

If you want a fixed positioned footer then don’t bother as your footer is too tall and would cover half your page (much like it does now except it would do it all the time)

10

Ok So I assume you want the footer to be visible when scrolling down,

I played around with the page and came up with a few things:

first:
change the .footer{ position:absolute} to .footer{ position:static}

than:
change the

@media (min-width: 1200px)
bootstrap.css:2086
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
    float: left; /* make this float:none */
    display: inline-block; /* add this. /*
}

change this

@media (min-width: 1200px)
bootstrap.css:2101
.col-lg-9 {
    width: 74%; /* change this from 75% to 74% */
}

I have not tried this on any other browser except google chrome but changing the footer to static forces it to render the other content as part of it, so removing float will make the stacking order the right way again and only other useful option without drastically changing the whole element I used display:inline-block; since these elements have white space I simply made the content 1% smaller so that it equals 99% not 100%;

The next issue is that there is quite a gap between the footer and the content it was overlapping, I don’t know if it was intentional but It is because of the social links that is not really aligned with the paragraphs.

But one small step at a time, it fixes the overlapping problem.

11

Yes that’s what I suggested above :slight_smile:

As an aside you never (almost never) want to directly change the bootstrap styles themselves as that could break the whole site. You should create new class over-rides for specific cases otherwise you risk messing up the whole grid. :slight_smile:

2 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.