[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Make my footer ALWAYS stay at the bottom

Posted on 2007-10-10
3
Medium Priority
?
1,616 Views
Last Modified: 2016-08-29
Hello,

I need to design a liquid layout so that as more text is added, the bottom footer moves down.

My layout works well if there is lots of text, but it does not work if there is little text.

https://filedb.experts-exchange.com/incoming/ee-stuff/4977-Demo.zip

How can I make the footer ALWAYS stay at the bottom?  If you download my example you will see my problem.

Thanks!
0
Comment
Question by:hankknight
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 2000 total points
ID: 20052548
Hey m8,

The basic idea is to have a div 100% height of the screen and then your footer comes after that div. The footer will have a negative top margin equivalent to its height. You would also have a bottom padding equivalent to the height of the footer, this would be set on a div inside the container.

<div id="container">
<div id="main">the page stuff</div>
</div>
<div id="footer">footer</div>


css would be like this

html, body {
height:100%;
min-height:100%;
}
div#container {
height:100%;
}
div#main {
padding-bottom:100px;
}
div#footer {
height:100px;
margin-top:-100px;
}

CHeers
0
 
LVL 16

Author Comment

by:hankknight
ID: 20053211
Thanks for your idea but it is still not working for me.

Check out my changes:

https://filedb.experts-exchange.com/incoming/ee-stuff/4981-Demo3.zip

What am I doing wrong?
Thanks.
0
 
LVL 16

Author Comment

by:hankknight
ID: 20056241
I have accepted your answer because it makes some good points and I have posted a related question here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22886700.html
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month18 days, 2 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question