Putting Elements side by side - html

Question

I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.

Answer 1

Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property

Answer 2

You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->