Two side by side divs are not working

Question

I have a page with multiple charts and grids. I am trying to put charts on the left column and grids on the right column. But for some reasons, the second chart is aligning to the right.

Here is my fiddle .

Java Script

    var sharedDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, value: 10, item: "Item1" },
        { id: 2, value: 12, item: "Item2" },       
        { id: 6, value: 11, item: "Item6" }       
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number", editable: false },
                value: { type: "number" },
                item: { type: "string" }                
            }
        }            
    }
});
for (var i = 0; i < 3; i++) {
    var divID = "chartDiv" + i;
    var cssClassForChartDiv = "leftcolumn";
    var divID1 = "gridDiv" + i;
    var cssClassForGridDiv = "rightcolumn";
    $("#parentDiv").prepend("<div class='" + cssClassForChartDiv + "'  ><div id='" + divID + "' style=width:400px;></div></div><div class='" + cssClassForGridDiv + "'><div id='" + divID1 + "' ></div></div>");//set width to 400 so that scroll bar appears
createGrid(divID1);
createChart(divID);
}

function createGrid(divID1)
{
$("#"+divID1).kendoGrid({
    dataSource: sharedDataSource,
    autoBind: false,
    editable: true,
    width:50//,
    //height:100//,
    //toolbar: ["save", "cancel"]
});
}
function createChart(divID2)
{
$("#"+divID2).kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    legend: {
            position: "top"
        },
    chartArea:{
        width:200,
        height:140}
    ,
    categoryAxis: {
        field: "item"   
    },
    series: [
        { field: "value", name: "Value" }
    ]     
});
}
sharedDataSource.read();

CSS

    .leftcolumn {
    margin-top: 5px;
    margin-left: 10px;
    width: 45%;
    border: 0px solid;
    float: left;
    position:relative;
    background-color:red;
    overflow-x:scroll;
    overflow-y: hidden;
}

.rightcolumn {
    margin-top: 5px;
    margin-right: 10px;
    width: 45%;
    border: 0px solid;
    float: right;  
    background-color:green;
}

HTML

<div id = "parentDiv"></div>

Thanks

Answer 1

It's because there is room for it to float beside the previous chart. And because there is a slight difference in vertical height it tries to arrange them like that.

To fix, try adding clear: left to your .leftcolumn

Updated fiddle: http://jsfiddle.net/mga6f/419/

Answer 2

or.. without double float (left and right)

 var sharedDataSource = new kendo.data.DataSource({ data: [ { id: 1, value: 10, item: "Item1" }, { id: 2, value: 12, item: "Item2" }, { id: 6, value: 11, item: "Item6" } ], schema: { model: { id: "id", fields: { id: { type: "number", editable: false }, value: { type: "number" }, item: { type: "string" } } } } }); for (var i = 0; i < 3; i++) { var divID = "chartDiv" + i; var cssClassForChartDiv = "leftcolumn"; var divID1 = "gridDiv" + i; var cssClassForGridDiv = "rightcolumn"; $("#parentDiv").prepend("<div class='" + cssClassForChartDiv + "' ><div id='" + divID + "' style=width:400px;></div></div><div class='" + cssClassForGridDiv + "'><div id='" + divID1 + "' ></div></div>");//set width to 400 so that scroll bar appears createGrid(divID1); createChart(divID); } function createGrid(divID1) { $("#"+divID1).kendoGrid({ dataSource: sharedDataSource, autoBind: false, editable: true, width:50//, //height:100//, //toolbar: ["save", "cancel"] }); } function createChart(divID2) { $("#"+divID2).kendoChart({ dataSource: sharedDataSource, autoBind: false, legend: { position: "top" }, chartArea:{ width:200, height:140} , categoryAxis: { field: "item" }, series: [ { field: "value", name: "Value" } ] }); } sharedDataSource.read(); 

 .leftcolumn { margin-top: 5px; margin-left: 10px; width: 45%; border: 0px solid; position: relative; background-color: #F00; overflow-x: scroll; overflow-y: hidden; float: left; clear: left; } .rightcolumn { margin-top: 5px; margin-left: 50%; width: 45%; border: 0px solid; background-color: #008000; } 

 <link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css" rel="stylesheet"/> <link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css" rel="stylesheet"/> <script src="//cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script> <div id = "parentDiv"></div> 

Answer 3

Why mix float left and right? Just saying

float: left; on all clear: both; and margin-right: 10px; on your "leftcolumn"

http://jsfiddle.net/mga6f/421/