HTML Marquee style not working

I am trying to run text from a database as a marquee. The marquee must occupy 10% of the total screen height, on the bottom of the screen.

Here is my code:

<div>
<font color="#FFFFFF" size="+1" face="Verdana"><marquee bgcolor="#FF0000" style="height: 10%; bottom: 0; " scrollamount="5">Your text here</marquee></font>
<div>

It does not occypy 10% and is not at the bottom of the page. What am I missing?

Solution

First of all, you forgot '/' in your closing div tag, but it is not critical. For your height: 10% to work, you have to fix the parent element height, for instance set height: 100% to the div. Then, for bottom:0 to work, position should be absolute, and parent positionning should be relative:

<html>
    <head></head>
    <body>
        <div style="position: relative; height: 100%;">
        <font color="#FFFFFF" face="Verdana" size="+1"><marquee style="height: 10%; bottom: 0px; position: absolute;" scrollamount="5" bgcolor="#FF0000">Your text here</marquee></font>
        </div>
    </body>
</html>

Hope it helps