Div Showing Up At Incorrect Location

Question

I have a that contains two nested div's. One of the nested div's contains a javascript graph.

When the page renders, the javascript graph is at an incorrect location, outside of the 's area. Does anyone know what I am doing wrong?

Here are the 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;
}

And Rails.ERB file

<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

Have you tried making the positioning absolute?

http://cssdesk.com/EUYhZ

Answer 2

You can get the <div>s in the right place with 2 fixes:

1. Float them left and right respectively.
2. Add a clearing element below them so they stay inside the #graph_container.

You can see it in action here.

If that doesn't work, your Javascript may be setting the position on the graph it creates to absolute. In this case, add position: relative; to your #graph container. This will cause any absolutely positioned children (i.e. the graph) to use it, rather than the document, as its coordinate system.

Answer 3

Pat and Danny's suggestions were valid and important for the output. But neither fixed my problem, what turned out to be the issue was actually the Javascript code. I didn't set where the code was suppose to be inserted.

Simply placing within the element I wanted DID NOT work. In my case, what I needed to do was fill in chart.write() with chart.write('graph'), so that the script would insert itself in the part of the html.