Image won't appear next to slider - html

Question

My image won't be positioned next to the slider.. instead it's just stacked underneath it. It's like there isnt room for the image because the slider takes up too much space, however it doesnt seem like that is the case when I look at the code, unless I missed something :)
This is my HTML:
<div id="content">
<div class="bx.wrapper">
<ul class="bxslider">
<li><img class="photo" src="IMG/pic_0001.jpg"></li>
<li><img class="photo" src="IMG/pic_0012.jpg"></li>
</ul>
</div>
<div id="hours">
<img src="IMG/hoursdk.png"/></div>
</div>
And my CSS:
#hours{
position:relative;
right:150px;
width:20%;
height:10%;
}
.bx-wrapper {
position: relative;
width:100%;
margin-left:-30px;
}
ul.bxslider {
margin-top: 60px;
padding: 0;
}
.bx-wrapper img {
min-width:30%;
max-width: 40%;
display: block;
}
I got the CSS from the BXslider, and I removed some unnecessary things, such as controls and pager, already.

Answer 1

Do you mean something like this? Check here
<div id="content">
<div class="bx-wrapper">
<ul class="bxslider">
<li><img class="photo" src="http://placehold.it/350x150"></li>
<li><img class="photo" src="http://placehold.it/350x150"></li>
</ul>
</div>
<div id="hours">
<img src="http://placehold.it/350x150"/></div>
</div>
CSS
.bx-wrapper, #hours{
display:inline-block;
}
.bx-wrapper{
float:left;
}
#hours{
float:right;
}
.bxslider{
list-style: none;
}