How to place an element at the bottom of a page, without declaring a position?

I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need

#icons {
position:fixed;
bottom:0;
}

I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?

Link to website: Roseannebarr.tumblr.com

Here is an example of my HTML

<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
开发者_如何学C<div id="tooltip">

{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

---

Fixed position is what it says, 'fixed', and you are using the same position for all of them.

The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.

For example:

#holder {
    bottom: 0px;
    left: -382.5px;
    margin: 0px auto 0px 50%;
    margin-left: 50%;
    position: fixed;
    width: 765px;
}

#tooltip {
    background: #6CB4E2;
    border-top: 30px solid white;
    display: none;
    left: 50%;
    margin-left: -382px;
    padding: 10px;
    position: absolute;
    bottom: 51px;
    width: 745px;
}

#outer {
    background: #6CB4E2;
    bottom: 0px;
    display: inline;
    float: left;
    margin-top: -8px;
}

---

I would wrap your icons in a div like this:

<div id="myicons_container">
    <img src="icon1.gif">
    <img src="icon2.gif">
    <img src="icon3.gif">
    <img src="icon4.gif">
    <img src="icon5.gif">
</div>

<style type="text/css" media="screen">
    #myicons_container {
        position: fixed;
        bottom: 0;
    }
</style>

Edit : Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):

<style type="text/css" media="screen">
    .block {
        width: 50px;
        height: 50px;
        float: left;
        position: fixed;
        bottom: 0;
    }
</style>

Note: you have to give floated items a width and height.

One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.