Styling Text to be a fixed distance from right side of screen

Question

Hello,

I would like to style <div class="logintitle">Please login</div> to be fixed at a certain distance (maybe 300 pixels) from the right side of the screen. The CSS below sort of does it, but it also makes the "Please" appear above the "login," and it adds a hortizontal scrollbar to the bottom of the browser window. How can I do this while leaving "Please" and "login" on the same line and while not adding a hortizontal scroll bar?

Thanks in advance,

John

.logintitle
        {
        position:absolute;
        width:10px;
        right:300px;
        top:2px;
        text-align: left;
        margin-bottom:3px;
        padding:0px;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        }

Answer 1

Well that's because you set the width to 10px and the 'Please login' is separated by a space which breaks it onto a separate line. As for the horizontal scrollbar, this division alone should not cause that, there must be something else in your page interfering with it.

To fix the multi-line issue, you can either widen the width of the block or add this style:

white-space: nowrap;