I am attempting to get comfortable with CSS and refrain from using tables - as most of you know, this is a challenging task.
The following below is a prime example. I have watched many videos and read several articles, and just when I think i got it down, it comes up ugly.
How can i get the username and unsername input on the same line, and likewise for the password and its input. I must be getting some confusion with the display or position, because the current display is scrunched up in the corner of the "content" div (that part works, its whats in side that is not cooperating
(and the class submitbtn doesn't even recognize at all)

PHP Code:
#login
{
    
positionrelative;
    
width100%;
    
height200px;
}
#login p {
    
width400px;
    
margin20px;
}
#login input {
    
floatright;
    
width250px;
}

#login .submitbtn {
    
width25;

and the HTML snippit
PHP Code:
some login blurb here...<br/>
<
br/>
<
div id="login">
    <
p>Realm Name: <input type="text" name="username" /></p>
    <
p>Password: <input type="text" name="password" /></p>
    <
p><input class="submitbtn" type="submit" value="Enter..." name="login"/></p>
</
div
while this seems to work, its klunky at best and again, the submit button will not format. I am looking for some concepts on placements. the above is ridiculously easy to do with a table, but I want to learn it with CSS instead as I understand the power of it.