CODEWITHSUNDEEP
htmlcss
coder guy
coder guy

Reputation: 589

My pages footer is hidden on the page and I have tried everything

I am having some troubles with the footer on my page. I have a main wrapper centered in the page, with height: auto; so that the wrapper will expand as I add content. It has been working so far. I added a header, navigation, and content, but for some reason as soon as I add a footer, the footer won't show up at all. I tried clear: both; as someone said and i tried:

position: absolute;
bottom: 0;

That didn't work either. I am new to front end; I am just learning it to make my portfolio. I normally don't ever do any front end development. I want to keep the footer within the main wrapper and have it show up. Thanks for your time.

Here is my HTML: http://pastebin.com/U9ZZFJsk
Here is my CSS: http://pastebin.com/3N7TX1B1

Upvotes: 1

Views: 54

Answers (4)

Susheel Singh
Susheel Singh

Reputation: 3854

Don't use absolute position. Make this 3 changes and it should work fine. This will center automatically based on size of screen margin:auto

#wrapper {
    width: 80%;
    opacity: 0.8;
    margin: auto;
    overflow: hidden;
}

#content {
    padding: 3.5em 4em;
    width: 100%;
    background-color: #CCCCCC;
}

#footer {
    width: 100%;
    clear: left;
    height: 4em;
    background-color: black;
    color: white;
}

Upvotes: 1

Lucky Chingi
Lucky Chingi

Reputation: 2258

Change the content position to relative

#content {
    position: relative;
    padding: 3.5em 4em;
    width: 100%;
    height: auto;
    background-color: #CCCCCC;
}

Upvotes: 1

Rahul Soni
Rahul Soni

Reputation: 4968

This is a working fiddle for you.

http://jsfiddle.net/ztcafcqa/

Basically, the issue was with your #content class where you used absolute. I have removed the absolute position.

#content {
    padding: 3.5em 4em;
    width: 100%;
    height: auto;
    background-color: #CCCCCC;
}

Upvotes: 0

Shaymol Bapary
Shaymol Bapary

Reputation: 458

Please change the content div css like below -

#content {
    background-color: #cccccc;
    clear: both;
    height: auto;
    padding: 3.5em 4em;
    position: relative;
    width: 100%;
}

I think it will slove your problem.

Upvotes: 1

Related Questions