Div apparaître à l'emplacement incorrect

Question

J'ai un qui contient deux div imbriqués. L'un des div imbriqués contient un graphique javascript. Lorsque la page est rendue, le graphique javascript se trouve à un emplacement incorrect, en dehors de la zone. Est-ce que quelqu'un sait ce que je fais mal?

Voici le css:

#graph_container{ 
    width: 75%; 
    margin: 0 auto; 
    background-color: #FFF; 
    padding: 20px 40px; 
    border: solid 1px black; 
    margin-top: 20px; 
} 

#graph{ 
    width: 75%; 
    margin-top: 20px; 
} 

#car_select{ 
    width: 25%; 
    margin: 0; 
    background-color: #FFF; 
} 

Et fichier Rails.ERB

<div id="graph_container"> 
    <div id="car_select"> 
    # this part is at the correct location...  
    </div> 

    <div id = "graph"> 
    # this is showing up outside of graph_container 
    <script type="text/javascript" language="javascript"> 
    //<![CDATA[ 
    var chart = new AnyChart('/AnyChart.swf'); 
    chart.width = 500; 
    chart.height = 500; 
    chart.setXMLFile('car_info.xml'); 
    chart.write(); 
    //]]> 
    </script> 
    </div> 
</div> 

Answer 1

Les suggestions de Pat et Danny étaient valides et importantes pour la sortie. Mais ni fixé mon problème, ce qui s'est avéré être le problème était en fait le code Javascript. Je n'ai pas défini où le code devait être inséré.

Il suffit de placer dans l'élément que je voulais n'a pas fonctionné. Dans mon cas, ce que je devais faire était de remplir chart.write() avec chart.write ('graph'), afin que le script s'insère dans la partie du html.

Answer 2

Avez-vous essayé de faire le positionnement absolu?

http://cssdesk.com/EUYhZ

Answer 3

Vous pouvez obtenir les <div> s au bon endroit avec 2 fixe:

1. flotter à gauche et à droite.
2. Ajoutez un élément de compensation au-dessous d'eux afin qu'ils restent dans le #graph_container.

Vous pouvez le voir in action here.

Si cela ne fonctionne pas, votre Javascript peut mettre la position sur le graphique qu'il crée à absolue. Dans ce cas, ajoutez position: relative; à votre conteneur #graph. Cela entraînera tous les enfants positionnés de façon absolue (c'est-à-dire le graphique) à l'utiliser, plutôt que le document, comme son système de coordonnées.