Adding login to right top corner - css

Question

I'd like to add login to right top corner, just like most forums have. I split my container on left/right, but the right side wouldn't work.
<div id="header">
<div class="container">
<div class="leftbox">
LOGO image
</div>
<div class="rightbox">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
css
body {
background-color: #E3E3E3;
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;
}
/* header/navbar*/
#header{
background-color: #2C2C2C;
color: #FFFFFF;
padding-top: 30px;
}
#header.leftbox{
float:left;
display: inline;
}
#header.rightbox{
float:right;
display: inline;
width: 200px;
}
here is my jsfiddle: https://jsfiddle.net/otj12jno/

Answer 1

You've made one mistake. There should be a space between id and class in css.
#header.leftbox{}
This code calls element which id="header" and class="leftbox"
#header .leftbox{}
This code calls element which class="leftbox" and his parent (or grandparent etc.) has id="header"

Answer 2

It might be easier to use position: absolute on the button class and then set position as follows:
#signinbtnClass {
position : absolute;
top : 0 px // or below the header or banner image
left :10px;
}