Unable to bottom the text like float:bottom

Question

I followed the solution mentioned here but, the text doesn't float at the bottom in my webpage, .

Right now, my CSS looks like this:

#note{
    position: absolute;
    bottom: 0px;
    text-align: center;
}

How do I get it at the bottom, like a footer or copyright message? Also, why is it not centring?

jsFiddle

Change position:absolute to position:relative – Alex Char May 10 '14 at 17:21 — Alex Char, May 10 '14 at 17:21

score 2 · Accepted Answer · answered May 10 '14 at 17:20

2

Add:

html{
   height:100%;
}

To your CSS to ensure body extends to the height of the viewport.

To center, add width:100% to #note

answered May 10 '14 at 17:20

SW4

69,876
20
132
137

Now the other `div` is getting full height for some reason. http://jsfiddle.net/rdesai/9u45Q/38/show/ – Rahul Desai May 10 '14 at 17:32
Because you have height 100% on #movies_booked, remove this and it looks OK – SW4 May 10 '14 at 17:51

score 0 · Answer 2 · answered May 10 '14 at 17:24

Your note is sitting at the bottom of the container, so that part is working. Your container maybe isn't as tall as you'd like it to be? Also you can center it by setting the width of the #note to 100%. It's currently centered but because it's an absolutely positioned it's width is not the same as it's parent.

Unable to bottom the text like float:bottom

2 Answers2