margin-bottom doesn't work

Question

I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.

<div id="preload">
    <div align="right" style="margin-bottom:40px; margin-right:50px;">
        <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
        <br>
        <a style="color:#00ff24;"><b>Please wait while the page is loading...
        <br>If the website doesn't load within one minute please refresh your page!</b>                                                                                                 
        </a>
    </div>
</div> 

Can anybody tell me what or how to make it work? Thanks

Answer 1

It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.

Answer 2

You should assign position absolute and use bottom and right proprietes.

http://jsfiddle.net/7yrUy/

<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
    <img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
    <br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>

Answer 3

try absolute position and use bottom/right instead of respective margins:

<img src="http://thc-racing.ucoz.com/design/loading.gif" alt=""  style="position: absolute; bottom:40px; right:50px;"/>

Here - http://jsfiddle.net/maximua/SKcvr/