Ember.js template layout

Question

I'm new to ember development and attempting to make my first app. In my application template I have a menu bar with an {outlet} tag underneath to accept other templates. My problem is that the menubar goes down the left of the page and I want the {outlet} content to be beside it on the right, not underneath.

I have been googling how to do this but have only managed to get it to float right, still underneath the menubar. Can someone tell me how to do it? Preferably without having to use some complicated css?

<script type="text/x-handlebars" id="application">
    <div class="main">
    <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
      <li class="active">
      <a href="#"<span class="glyphicon glyphicon-home"></span>  Dashboard</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-user"></span>  Agents</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-list"></span>  Queues</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-signal"></span>  Analytics</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-wrench"></span>  Settings</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-arrow-right"></span>  Logout</a>
      </li>
    </ul>
    </br>

      {{outlet}}
    </div>
  </script>

Answer 1

If you are using bootstrap, you can use the columns class col-md-x

<div class="container">
    <div class="col-md-2">
        your navs
    </div>
    <div class="col-md-10">
        {{outlet}}
    </div>
</div>

Give a look in that sample http://emberjs.jsbin.com/EJifOyaX/1 And in the code http://emberjs.jsbin.com/EJifOyaX/1/edit