Align items on html page

Navigation
1

I have the following code:

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>

The idea was for them to stand side by side, but ...

HowdoImakethemparallelandnotthisway?

EDIT1:InsidethecanvasIhaveajavascript:

<script>window.onload=function(){vardata={}data.shipped=[<?phpecho$mes_quant[$b];?>];data.sold=[<?phpecho$hoje_quant[$b];?>];varbar1=newRGraph.Bar({id:'cvs',data:data.shipped,options:{gutterTop:40,gutterLeft:70,colors:['rgba(0,0,255,0.2)'],labels:['AcessosHoje/Mês'],labelsAbove:data.shipped,strokestyle:'rgba(0,0,0,0)',scaleZerostart:true,textAccessible:true,shadow:true}}).draw();varbar2=newRGraph.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>

Edit2

<canvasclass="apoio" id="cvs" width="500" height="200" style="position: absolute; left: 0px; top: 0px; display: inline; float: none;"></canvas>
    
asked by anonymous 14.02.2018 / 17:13

2 answers

1

I see that you use a plugin called RGraph . This plugin creates a div container with id #cvs_rgraph_domtext_wrapper .

So, in your CSS, set float: left; to this div : 

#cvs_rgraph_domtext_wrapper{
   float:left;
}

Print:

    
14.02.2018 / 17:52
1

I do not know if this is exactly what you want, but with display: flex to do something like this. I think it might solve your problem.

The Gray Box will always stay in the center of the remaining space after the Red box 

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
}
.apoio{
		float:left;
		background-color: red;
		width: 500px;
		height: 200px;
 } 
 .box{
		width:300px;
		height:100px;
		background-color:#666;
		border-radius: 10px;
		margin: 0 auto;
 }
<canvas class="apoio" id="cvs" ></canvas>
<div class="box"></div>
    
14.02.2018 / 17:30
Import data from an excel spreadsheet into the Database- Epplus Mkdir creates directories without permission