Question

I am having extensive trouble with tiling my graphs horizontally instead of one beneath the other. For some reason, float:left refuses to work. This is what I currently have:

<h2><center>Title1</center></h2>
<div id="flot-graph-1" class="graph-area"></div>
<h2><center>Title2</center></h2>
<div id="flot-graph-2" class="graph-area"></div>
<h2><center>Title3</center></h2>
<div id="flot-graph-3" class="graph-area"></div>

I’ve tried adding style="float:left" in the div, but it doesn’t work. I’ve also tried surrounding this whole text in another div container, and then adding the same style phrase. No dice. Tried going to CSS page, trying something like

#flot-graph-3
{
    float: left;
}

Still nothing. I tried display:inline as well, but still nothing is working. Instead of tiling horizontally, it is just erasing the left-margin and sticking to the left of my metro app (but still appearing one beneath the other). Help please! Does anyone know how to solve this?

Answer 1

You can do this by setting the graph-area class to display:inline-block in your css and setting the width of the parent container to ‘at least’ 3x the width of each graph, this way they will sit next to each other in a line.

You could also use float:left, but I suspect your parent element is not big enough and the graphs are overflowing onto the next line

display:inline wont work as flot requires the graphs to be block level elements

If you want the h2 titles above each graph you will need to wrap each graph and title in its own div, as the h2 element is a block

eg.

HTML:

<div class="graphWrapper">
    <div class="graph-area">
        <h2><center>Title1</center></h2>
        <div id="flot-graph-1" class="graph-area"></div>
    </div>
    ....etc
</div>

CSS:

.graphWrapper{width:1000px} /* at least 3x width of graph */
.graph-area{display:inline-block}

etc.