CODEWITHSUNDEEP
htmlcss
Nickolodeon
Nickolodeon

Reputation: 2956

position div at the bottom

I'm trying to position div as a footer inside parent div.

<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>

Now left and right elements are ok, but the footer div does not align to the bottom of the containing div, but to the bottom of its content.

But if i try putting position:absolute for the footer, it looses grasp on the parent's div width and thus left and right spans go one right after the other.

Upvotes: 0

Views: 140

Answers (3)

Relaxing In Cyprus
Relaxing In Cyprus

Reputation: 2016

If you are still looking, I achieved what I think you are after here:

http://www.facebookanswers.co.uk/code/fullheight/demo2.htm

Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.

The full article is here:

http://facebookanswers.co.uk/?p=312

What that gives you is a header, two columns and a footer.

One column is used for navigation, the other for the main content. The footer goes at the bottom of the main column. If the content is less than a full screen, the footer remains at the bottom of the screen. However, once you get more content than screen, it will scroll with the rest of the data.

Upvotes: 1

Michał Miszczyszyn
Michał Miszczyszyn

Reputation: 12721

http://jsfiddle.net/ch4Hw/

Use position:relative; on the container and position:absolute; bottom:0; height:auto; on footer.

Upvotes: 2

allaire
allaire

Reputation: 6045

What you're looking for is (I think) a sticky footer. See here for a good technique: http://ryanfait.com/sticky-footer/

Upvotes: 1

Related Questions