CODEWITHSUNDEEP
htmlcss
liamzebedee
liamzebedee

Reputation: 14490

Could someone explain why my footer is in the middle of the page?

I'm trying to make my sidebar stretch to the bottom of the page. I've succeeded in making it stretch but now my footer it getting in the way. For some reason I don't know, my footer is appearing before the content div has ended, and cutting off the sidebar, as well as making the page messy. enter image description here

As you can see, as soon as the footer appears, the sidebar (grey box) stops and the content is overlapped.

Could anyone point out the code that is doing this and a fix?

Upvotes: 0

Views: 1112

Answers (2)

Rob W
Rob W

Reputation: 349012

Setting min-height:100%; results in a minium height of 100%, adding an additional height:100%; is obsolte. The browser calculates the height of elements relative to the closest block-level parent element. At the top level, the height will be relative to the browser window height.

Remove the height: 100% declarations where you have also specified a min-height:100%;, and your problem will be solved: #globalDiv, #topcontentWrapper.

Upvotes: 1

clem
clem

Reputation: 3366

remove the height from this piece of css: 

 #topContentWrapper {
        height: 100%;
        min-height: 100%;
    }

change to 

#topContentWrapper {
    min-height: 100%;
}

Upvotes: 1

Related Questions