Overflow to the left

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
</script>
<div class="left">< ^ ></div>
<div class="right">[]</div>
<div class="locationWrap">
    <div class="locationContainer">
        <div class="location">
            <span class="item">
                home
            </span>
            <span class="item">
                username
            </span>
            <span class="item">
                Documents
            </span>
            <span class="item">
                cssNotes
            </span>
            <span class="item">
                floats
            </span>
            <span class="item">
                clear
            </span>
        </div>
    </div>
</div>

CSS

.left {
    //border: solid 1px #ededed;
    float:left;
}
.right {
    //border: solid 1px #ededed;
    float:right;
}
.locationWrap {
    border-bottom: solid 1px #ededed;
    overflow:hidden;
    height:20px;
}
.locationContainer { float: left; }
.location {
    //border: solid 1px #ededed;
    overflow:hidden;
    float:right;
    height: 20px;
}
.location .item {
    border-right: solid 1px #9d9d9d;
    border-radius: 10px;
    padding-left: 6px;
    padding-right:4px;
    line-height: 22px;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();