Issues getting div to float right of another div - html

Question

I am trying to get my registerbutton div to float right of the div - signinbutton. I do not think I can wrap the signin div around the register div to make it a parent because I have pop up code under the signinbutton div. I tried making a jsfiddle, but the effect did not result the same. To see a real view of this, my site is sundayfundayleague.com .
I need to get the register button to be inline with the Sign in one.
HTML
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div class="registerbutton">
Register
</div>
CSS
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
float: right;
}

Answer 1

You can use span inside the 1st div
Demo
https://jsfiddle.net/knkvksdz/
Html
<div class="signinbutton"> <a class="signin" href="javascript:void(0)">Sign In</a>
<span class="registerbutton">
Register
</span>
</div>
Css
.signinbutton {
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
float: right;
}

Answer 2

flip the divs around in the HTML code and use the float: left; attribute instead. Float right tends to be a bit more tricky I think and float left is the more complient one. You might have better luck doing it that way.
<div class="registerbutton">
Register
</div>
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
CSS
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
}
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
float: left;
}

Answer 3

First of all. Try reducing your picture size. its too big. i takes time to load the page.
Here is my solution.
I will add wrapper outside those two.
<div class="wrapper">
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div id="light" class="signInpopup">
<a class="close" href="javascript:void(0)">Close</a>
<form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
<div class="center">
<input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required="">
<br>
<input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required="">
<br>
<br>
<br>
<label for="remember">
<input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="687d55402565d69c55ab41c51eba5d76">
<label for="widebutton">
<input id="widebutton" type="submit" value="Sign In">
</label>
<br>
<br>
</div>
</form>
</div>
<div id="fade" class="black_overlay"></div>
<div class="registerbutton">
Register
</div>
</div>
and add this css to wrapper:
.wrapper{
display: inline-block;
width: 100%;
margin-top: 50px;
}
remove this from your #registerbutton
float:right
and remove from your .signinbutton
margin-top:352px;
and add .signinbutton
float:left