Trying to get table and panels aligned in html

Question

I am trying to get four panels on the right side of the screen with a table on the left side of those. My issue is when the table is not long "tall" enough the panels move under the table instead of staying on the left side. I am using a bootstrap theme.

<div class="row">
    <!-- Start Of Projects Table -->
    <div class="col-lg-8 pull-right">
       <!--table-->
    </div>
    <!-- End of projects table -->
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
    </div>
    <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
    </div>
</div>

Answer 1

That's because you should use the table inside div element and for the 4 panels you should use another "row".

<div class="row">
  <div class="col-lg-8 pull-right">
   <!-- Start Of Projects Table -->
   <!--table-->
   <!-- End of projects table -->
  </div>
  <div class="col-lg-4 pull-left settings">
     <div class="row">
       <div class="col-lg-12 pull-left settings">
        <!--Panel Code -->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code -->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code-->
       </div>
       <div class="col-lg-12 pull-left settings"> 
        <!--Panel Code-->
       </div>
     </div>
  </div>
</div>

Answer 2

You should make parents divs there. Something like this:

 <div class="row">
   <div style="float:left; width:50%;">
     <div class="col-lg-8 pull-right">
       <!--table-->
     </div>
   </div>
   <div style="float:right; width:50%;">
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code -->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
     </div>
     <div class="col-lg-4 pull-left settings"> 
       <!--Panel Code-->
     </div>
   </div>
</div><!--End of Row-->

Bootstrap does have a class. If i remember is class="col" this way you make columns inside that row.and also can be fully responsive. Check this basic tamplates. It will help you understand a little bit more. http://getbootstrap.com/getting-started/#template