Comment faire flotter ces éléments de graphique C3 et HandsOnTable sans impact sur les fonctionnalités?

Question

J'ai une table HandsOnTable (avec quelques ajouts pour les demandes des utilisateurs) et une carte C3 (qui doit remplir l'espace horizontal) et ne peut pas les faire bien vivre les uns à côté des autres.

https://jsfiddle.net/horacebury/2vc606wx/13/

I/penser/ces deux DIVs devraient pouvoir flotter, mais quand je le fais, ils ne le font pas non plus (float) ou d'arrêter l'info-bulle de la carte C3 ou arrêter une partie de la colonne du milieu l'édition de travail:

<div> 
    <table class="tgh"><tr><td>Auxilliary Power</td></tr></table> 
    <div id="example"></div> 
    <table class="tg"> 
     <tr> 
     <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td> 
     </tr> 
    </table> 
    </div> 
    <div id="c3chart"></div> 

Answer 1

Je ne sais pas comment je l'ai fait, mais je suis sûr que c'est un Bodge:

https://jsfiddle.net/horacebury/2vc606wx/15/

<div style="float: right;"> 
    <table class="tgh"> 
    <tr> 
     <td>Auxilliary Power</td> 
    </tr> 
    </table> 
    <div id="example"></div> 
    <table class="tg"> 
    <tr> 
     <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td> 
    </tr> 
    </table> 
</div> 
<div id="c3chart" style="width: 65%;"></div>