Q:

Alinhar itens na pagina html

Tenho o seguinte código:
CSS:
.apoio{
   float:left;
} 

.box{
   width:300px;
   height:100px;
   background-color:#666;
   border-radius: 10px;
   margin: 0 auto;
}

HTML:
<canvas class="apoio" id="cvs" width="500" height="200"></canvas>
<div class="box"></div>

A ideia era que ambos ficassem um do lado do outro, porém...

Como faço para deixa-los paralelos e não dessa forma?
EDIT 1:
Dentro do canvas tenho um javascript:
<script>
window.onload = function ()
{
    var data = {}
        data.shipped = [<?php echo $mes_quant[$b]; ?>];
        data.sold    = [<?php echo $hoje_quant[$b]; ?>];

    var bar1 = new RGraph.Bar({
        id: 'cvs',
        data: data.shipped,
        options: {
            gutterTop: 40,
            gutterLeft: 70,
            colors: ['rgba(0,0,255,0.2)'],
            labels: ['Acessos Hoje/Mês'],
            labelsAbove: data.shipped,
            strokestyle: 'rgba(0,0,0,0)',
            scaleZerostart: true,
            textAccessible: true,
            shadow: true
        }
    }).draw();

    var bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data.sold,
        options: {
            ymax: bar1.scale2.max,
            gutterTop: 40,
            gutterLeft: bar1.Get('gutterLeft'),
            colors: ['pink'],
            noaxes: true,
            labelsAbove: true,
            hmargin: 20,
            ylabels: false,
            backgroundGrid: false,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true,
            shadow: true
        }
    }).draw();
};
</script>

Edit 2
 <canvas class="apoio" id="cvs" width="500" height="200" style="position: absolute; left: 0px; top: 0px; display: inline; float: none;"></canvas>

A:

Vejo que você usa um plugin chamado RGraph. Esse plugin cria uma div contâiner com id #cvs_rgraph_domtext_wrapper.
Logo, no seu CSS, defina o float: left; para essa div:
#cvs_rgraph_domtext_wrapper{
   float:left;
}

Print:

