Scrollable div floated to left still wraps beneath its sibling

Question

We have a FusionCharts application where we want to show charts in columns. One particular kind of chart will always show in the left-most column, a div floated left with the id of "hlineargauges-container" . Next to this I want to float left another container "whatifcharts-container" which in turn will contain two column divs "whatifcharts-container-left" and "whatifcharts-container-right" , within which we will alternate placement based on a counter.

Below is a snippet of Javascript/jQuery that creates the divs and places the chart. Please excuse that I have in-lined the style for now, due to the way our application gets deployed, I typically wait until I have such UI work perfected before I extract things into classes.

chartPlacementDiv = jQuery("#charts-" + chartPlacement); //either "top" or "bottom"

if (chartPlacementDiv.children('div').length == 0) { //because we are in a for loop
    chartPlacementDiv.append('<div id="hlineargauges-container" style="float:left">');
    whatifChartsContainerDiv = jQuery('<div id="whatifcharts-container" style="float:left; overflow: scroll">');
    chartPlacementDiv.append(whatifChartsContainerDiv);
    whatifChartsContainerDiv.append('<div id="whatifcharts-container-left" style="float:left">');
    whatifChartsContainerDiv.append('<div id="whatifcharts-container-right" style="float:left">');
}

chartEl = jQuery('<div></div>').attr('id', chartConfig.renderAt);

if (chartConfig.type == "hlineargauge") {
    jQuery("#hlineargauges-container").append(chartEl);
}
else {
    if (++whatifChartsCount % 2) {
        jQuery("#whatifcharts-container-left").append(chartEl); 
    }
    else {
        jQuery("#whatifcharts-container-right").append(chartEl);
    }
}

Below are the resulting charts however, on a somewhat narrow screen. As you see, despite floating left, and despite scrolling (and the scrollbars are visible), id="whatifcharts-container" wraps beneath id="hlineargauges-container" instead of being placed to its right. I tried adding display:inline-block to the whatIfChartsContainerDiv, but this made no difference.

Answer 1

The issue is that the width of #whatifcharts-container + #hlineargauges-container is greater than the width of the viewport. You will likely need to set the width for these containers. For example:

<div id="hlineargauges-container" style="width: 33%; float: left;">
  <!-- Charts go here -->
</div>
<div id="whatifcharts-container" style="width: 66%; float: left;">
  <!-- Charts go here -->
</div>

Here is a contrived fiddle: https://jsfiddle.net/2re1mmn5/