Why does Highcharts <div> element take up the entire page?

Question

I'm trying to embed a small chart (using Highcharts) on my webpage. I've provided an example of what I'm trying to do. When the page loads, the chart takes up the entire page by overwriting whats in the mainDiv (which I haven't included in here). I've tried modifying the dimensions of the division and the chart. I've also looked at the 'renderTo' parameter for 'chart', and tried rendering it as an object reference.

Does anyone know what might be causing this issue? Am I missing a critical parameter in my chart? Or have I written my code incorrectly? Thanks.

<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="container" style="width:10px; height:10px;"></div>

<script>
    $(function () { 
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
    </script>

Answer 1

Not sure if this will work but have you tried the renderTo: 'divname' option... Something like...

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

Answer 2

I fixed this by changing the id attribute of my element from "container" to just "contain" (and obviously changed any code that previously referenced "container" to just reference "contain").

For whatever reason this fixed my problem, although I'm still not quite sure why. Perhaps "container" is a keyword used by Highcharts.

Final code looked like this:

<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="contain" style="width:10px; height:10px;"></div>

<script>
    $(function () { 
        $('#contain').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
    </script>