How do I float div to the next one - html

Question

I am trying to put a div next to each other. I have tried to use float: left etc, also I am using bootstrap however I have tried the column setting but it does not work,
HTML:
<div class="container">
<div class="Mainbody2">
<div class="ref1">
<h2>About</h2>
<p>Text GOES HERE</p>
<h2>Statement!</h2>
<p>STATMENT GOES HERE</p><br />
<br />
<br />
<h2>Number1</h2>
<ul>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li style="list-style: none"><br /></li>
<li>link1</li>
<li>link1</li>
<li>link1</li>
<li style="list-style: none"><br /></li>
</ul>
</div>
<div class="ref2">
<h2>Description</h2>
<ul>
<li>link2</li>
<li>link2</li>
<li>link2</li>
<li style="list-style: none">
<br />
<h2>Libraries</h2>
</li>
<li>link2</li>
<li>link2</li>
<li>link2</li>
</ul>
</div>
</div>
</div>
Link to Fiddle
Just to make it clear i am trying to get Description next to Number 1 and then Libraries next to description
Thanks again for the help

Answer 1

See this fiddle
I've changed your HTML a bit as below
<div class="container">
<div class="Mainbody2">
<div class="ref1">
<div class="left">
<h2>About</h2>
<p>Text GOES HERE </p>
<h2>Statement!</h2>
<p>
STATMENT GOES HERE
</p>
</div>
<div class="right">
<h2>Description</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
<div class="ref2">
<div class="left">
<h2>Number1</h2>
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br>
<li> link1</li>
<li> link1</li>
<li> link1</li>
</div>
<div class="right">
<h2>Libraries</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
</div>
</div>
also, added the below CSS
.left,
.right,.ref1,.ref2 {
float: left;
}
.ref1,.ref2{
padding:10px;
width:100%;
}
.left,.right{
width:50%;
}

Answer 2

add md and sm to you div <div class="col-lg-2 col-md-2 col-sm-2">
<div class="container">
<div class="Mainbody2">
<div class="col-md-2 col-sm-2 col-xs2">
<h2>About</h2>
<p>Text GOES HERE </p>
<h2>Statement!</h2>
<p>
STATMENT GOES HERE
</p>
<br /> <br /> <br />
<h2>Number1</h2>
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br />
<li> link1</li>
<li> link1</li>
<li> link1</li>
<br />
</div>
<div class="col-md-2 col-sm-2 col-xs2">
<h2>Description</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
<br />
<h2>Libraries</h2>
<li> link2</li>
<li> link2</li>
<li> link2</li>
</div>
</div>
</div>
see js fiddle http://jsfiddle.net/vrupp3wr/
set the proper col lenght for your need

Answer 3

Have you tried something like this?
<div class="row">
<div class="col-md-4">column 1</div>
<div class="col-md-4">column 2</div>
<div class="col-md-4">column 3</div>
</div>
With Bootstrap you have to designate one div as a row and the nested divs can be columns.

Answer 4

this works for me
<div class="row">
<div class="col-xs-6">
<div class="panel">
<fieldset>
<legend>Legend</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
</fieldset>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="exampleInputEmail">
Email address</label>
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
</div>
</fieldset>
</div>
</div>
</div>