Floating a Bootstrap Carousel - html

Question

I'm trying to float a div with text content in it to the left of a Bootstrap Carousel, but the results make no sense. Can someone help me out?
It seems like the elements are staying block, even though I specify them as inline. Could this have to do with Bootstrap itself?
I've also included the CSS just in case it helps.
<div class="container">
<div id="elSlideShow">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
display: inline;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
display: inline;
}

Answer 1

You can simply float them by using "float: left;" property. Put it in either CSS or in div, like style="float:left;"
https://fiddle.jshell.net/odzbg8rh/
You can adjust the distance between each button in CSS

Answer 2

I've copied your code and its working. Just a few points to correct.
Remove display: inline from your css as you are using float and when applied float to elements, it makes them block. So display: inline makes no sense when using with float.
Add class clearfix to parent of floating elements to set their layout.
<div id="elSlideShow" class="clearfix">
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="elSlideShow" class="clearfix">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Answer 3

Thanks for the help people, actually the problem was a list that came before. The fact that I floated that list probably messed with these elements. My solution was to add a line break after that list.