Question: ```
<H2> Would you like to bounce an instance or application?</H2>
<form name="dropDown" method="POST">

    <select name="choiceDropDown" onchange="include()">
        <option value="1">Instance Level</option>
        <option value="2">Application Level</option>
    </select>
</form>

<div id="inst" class="outsidePages"><jsp:include page='Instance_List.htm'/></div>

<!-- END CONTAINER -->

</td>
</tr>
</table>
<!-- end content -->

</td>             </tr>         </table>     </div> </div>

<div id="footerWrapper">     <div id="footer">Footer content goes here</div> </div>

</body>

<script type="text/javascript"> function include() {     var container = document.getElementById("inst");          container.innerHTML = "";

    container.innerHTML = " <jsp:include page='Home.htm'/>  ";

    }
</script>
</html>

```

So for the script above what I want to do is if the drop box changes then the div "inst" should change so that it is including a different page. The problem is when I try to do this it breaks. If I make `container.innerHTML = "Good morning"` or anything else it works fine. Any ideas why this happens?

Answer: 
Your main .container has 100% width, it doesn't matter if you center it, it will still start drawing it from the very left. The div inside of it that's responsible for the left-aligned box has no id/class, and you're doing no aligning on it. Technically your main container is centered, but everything inside of it is left-aligned.
Do you mean like this? <http://jsfiddle.net/36ujG/>

It's a little hard to understand what you are trying to center. All I did was added `margin: 0 auto` to the child div of container.