Not sure why Div is not Floating to the right - html

Question

I am having a issue with a particular div that will not float to the right. I have tried to remove the div and other ways and yet it still does not work.
Here are the following css and html code that I am using:
CSS:
#sidebarright{
float: right;
width: 30%;
padding: 0; margin:0;
padding-top: 20px;
}
.resstyle{
font-size: 18px !important;
font-weight:bold;
margin: 0 0 7px 0;
padding-left: 20px;
}
#wrapper {
width: 940px;
height:100%;
margin: 0 auto;
}
#banner-wrapper{
display:block;
padding:0;
margin-left:auto;
margin-right:auto;
background:#FFF;
background-image: url(./img/Banner.jpg);
height:14.6%;
padding-bottom:44px;
}
HTML:
<div id="wrapper">
<!-- banner-wrap starts here -->
<div id="banner-wrapper">
<!-- Menu Tabs -->
<ul>
<li class="navbar-buttons"><span>Home</span> <span style="color:white !important">|</span> <span>Support</span></li>
</ul>
</div>
<div id="sidebarright">
<img class="button" src="img/Pro.jpg" alt="Pro" />
<div class="resstyle">Resources</div>
</div>
</div>
UPDATE:
<!---Temporary styling, to test--->
<style>
.img-banner{
margin-left:auto;
margin-right:auto;
display:inline;
}
body{
position:relative;
background-color:white;
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
color: white;
text-decoration: none;
font-family: Sherwood !important;
}
.navbar-buttons{
padding-top:20px;
padding-right:20px;
text-align:right;
list-style:none;
margin:0 auto;
overflow:hidden;
<!---background-image: url(./img/Banner.jpg);--->
}
#wrapper {
width: 940px;
height:100%;
margin: 0 auto;
}
#banner-wrapper{
display:block;
padding:0;
margin-left:auto;
margin-right:auto;
background:#FFF;
background-image: url(./img/Banner.jpg);
height:14.6%;
padding-bottom:44px;
}
img.no-border{border: 0;}
.img-banner{
margin-left:auto;
margin-right:auto;
display:block;
}
<!---/**********************Left Side of Page****************************/--->
#sidebarleft{
width: 30%;
padding-top:30px;
padding-right: 20px;
display:inline;
float:left;
}
#sidebarleft ul.menu{
list-style:none;
padding:0;
margin:10px 0 10px 0;
}
.leftbuttons1{
background-image: url(./img/Button_1.jpg);
background-repeat:no-repeat;
padding: 5px 10px 10px;
}
.leftbuttons1 a{
color:grey;
font-size:10pt !important
}
.leftbuttons{
background-image: url(./img/Button_1.jpg);
background-repeat:no-repeat;
padding: 5px 0 10px 10px;
}
.leftbuttons a{
color:grey;
font-size:10pt !important
}
.leftbuttons2{
background-image: url(./img/Button_2.jpg);
background-repeat:no-repeat;
padding: 7px 0 10px 7px;
}
.leftbuttons2 a{
color:grey;
vertical-align:center;
font-size: 10pt !important;
}
<!---/**************************************************/--->
<!---/***********************Right Side of Page***************************/--->
#sidebarright{
float: right;
width: 30%;
padding: 0; margin:0;
padding-top: 20px;
}
<!---/**************************************************/--->
img.buttonUlti{
float:right;
padding-top:30px;
padding-bottom:15px;
border-radius:18px;
}
.shiftRes{
margin-left:27px;
padding-top:40px;
}
.departstyle{
font-size: 18px !important;
font-weight:bold;
padding-left: 10px;
margin: 0 0 7px 0;
padding-top: 17px;
}
.resstyle{
font-size: 18px !important;
font-weight:bold;
margin: 0 0 7px 0;
padding-left: 20px;
}
</style>
<div id="wrapper">
<!-- banner-wrap starts here -->
<div id="banner-wrapper">
<!-- Menu Tabs -->
<ul>
<li class="navbar-buttons"><span>Home</span> <span style="color:white !important">|</span> <span>Support</span></li>
</ul>
</div>
<div id="sidebarright">
<img class="buttonUlti" src="img/Pro.jpg" alt="Pro" />
<div class="resstyle">Resources</div>
</div>
<div id="sidebarleft">
<ul class="menu">
<li class="departstyle">Departments</li>
<li class="leftbuttons1">Claims</li>
<li class="leftbuttons">Credentialing</li>
<li class="leftbuttons">Customer Services</li>
<li class="leftbuttons">Data Management</li>
<li class="leftbuttons">Decision Support</li>
<li class="leftbuttons">Employee Services</li>
<li class="leftbuttons">Finance</li>
<li class="leftbuttons">HCC</li>
<li class="leftbuttons2">Health System <br />Engagement and<br /> Contracting</li>
<li class="leftbuttons">Mail Room</li>
<li class="leftbuttons">Marcom</li>
<li class="leftbuttons">Medical Management</li>
<li class="leftbuttons">Network Management</li>
<li class="leftbuttons">NextGen</li>
<li class="leftbuttons">Operations</li>
<li class="leftbuttons">Physician Resources</li>
<li class="leftbuttons">Provider Relations</li>
<li class="leftbuttons">Quality Management</li>
<li class="leftbuttons">Quality Improvement</li>
<li class="leftbuttons">Risk Management</li>
</ul>
</div>
Any help would be appreciated, Thanks

Answer 1

So, with your updated code, your css isn't being applied because the comments you're using are not correct for css. You're using HTML comments in css instead of the proper /* this is a comment */
Not Valid:
<!---/**************************************************/--->
Valid:
/**************************************************/
JSFiddle

Answer 2

If you want it to float right of the #banner-wrapper, you have to also float that one (float: left) and give itwidth: 70%`(and remove the auto margins), so that they fit beside each other:
http://codepen.io/anon/pen/gMLVKV