CODEWITHSUNDEEP
htmlcss
Superunknown
Superunknown

Reputation: 501

Can't fix page layout in HTML and CSS

Hi I've got a website up.

I'm a no0b but I learn fast and I learn as I go.

However in one of the pages...the footer has gone up too close to the header. I want the area between the header and the footer fixed. I've tried changing the height of the main content in css but it doesn't seem to work. The front main page is ok. It's the about me page I'm having difficulty with. I just want the space between the header and footer fixed regardless of what's between them.

I use:

#site_content {
    width: 950px;
    overflow: hidden;
    margin: 10px auto 0 auto;
    padding: 10px;
}

Screenshot of my page

thanks for your help.

Upvotes: 0

Views: 86

Answers (3)

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

Hey just replace your footer code by the below code

CSS

footer {
width: 100%;             /* make width 100% changes done*/
font: normal 100% arial, sans-serif;
padding: 50px 20px 5px 0;
text-align: right;
background: transparent;
position: fixed;            /*changes done*/
bottom: 0;                 /*changes done*/
top: auto;                /*changes done*/
text-align: center;       /*changes done*/
}

Upvotes: 3

Woodrow Barlow
Woodrow Barlow

Reputation: 9057

Add this to your #footer selector in your CSS:

#footer {
    position:absolute;
    bottom:0;
}

Upvotes: 1

Mindastic
Mindastic

Reputation: 4121

You can get an idea about how to do it by inspecting this template from twitter bootstrap: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

BTW: Twitter Bootstap may result interesting to you (based on the screenshot you show).

Upvotes: 0

Related Questions