Routing not rendering to intended area

I have an outlet in the max view which render in some outlet then i go to min view and the previous rendered outlets are not removed

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
    <fieldset>
        <legend>Application1 </legend>
        <div id="divApp1">
        </div>
    </fieldset>
    <script type="text/x-handlebars" data-template-name="index">        
       Index Template
        {{#linkTo "details"}}go to Details{{/linkTo}}
        <hr/>
        <h4>HOME</h4>
    </script>
   
    <script type="text/x-handlebars" data-template-name="details">
        Details Template   {{#linkTo "index"}}go to index{{/linkTo}}
        {{#linkTo "index"}}Home{{/linkTo}}
        <hr/>
        <h4>DETAILS</h4>
        <hr/>
        {{content}}
    </script>

CSS

.outletArea
{
    border: solid thin green;
    background: gray;
    height: 30px;
        
}

JavaScript

var App = Ember.Application.create({
            rootElement: "#divApp1"
        });


Ember.LOG_BINDINGS = true; ;



App.Router.map(function () {
    this.route("index", { path: "/" });
    
    this.route("details", { path: "/details" });
    
    
});

App.DetailsRoute = Ember.Route.extend({
    renderTemplate: function () {
        this._super();//to render the hotel temlate whch has outlets
        this.render({ controller: 'details' });
    }
});
App.DetailsController = Ember.Route.extend({
    content: 'Welcome to About'
});