1

I want to display two charts in the same line using div. Can you please help?

Here is the what I am trying but it shows up in 2 lines.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div>
        <div id="container" style="width: 200px; height: 200px; diplay:inline"></div>
        <div id="container2" style="width: 200px; height: 200px; display:inline"></div>

    </div>

full code in http://jsfiddle.net/nCe36/

Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
user2421350
  • 147
  • 1
  • 2
  • 8

2 Answers2

9

Just float the containers left!

Either give both #container and #container2 a left float:

#container,
#container2 {
    float: left;
}

(Demo)

Or give both containers a class (say, "container") and float that class left:

.container {
    float: left;
}

(Demo)

Edit: display: inline-block will also work, as @Nile has pointed out. It's a matter of personal preference: I tend to prefer floats; some people, inline-blocks. For more information on which to use, you might want to check out this post: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;.

Community
  • 1
  • 1
Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
4

Try:

display: inline-block;

Modified example: http://jsfiddle.net/pzqLG/

Nile
  • 1,586
  • 1
  • 14
  • 25