Bootstrap@2.1.1

/* Put your css in here */
.layout {
    border: 1px solid #ddd;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

.layout,
.layout .layout-body,
.layout.fluid .layout-sidebar {
    height: 300px;
}

.layout {
    margin-bottom: 20px;
    padding: 9px;
}

.layout div {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.layout .layout-body {
    background-color: #dceaf4;
    margin: 0 auto;
    width: 70%;
}

.layout.fluid .layout-sidebar,
.layout.fluid .layout-header,
.layout.fluid .layout-body {
    float: left;
}

.layout.fluid .layout-sidebar 
{
    border: 1px solid #cedee7;
    background-color: #fff;
    width: 23.2%;
    margin-left: 1.0%;
}

.layout.fluid .layout-body {
  width: 75%;
}

#charList li
{
    margin: 2px;
}

.world-list {
    width: 150px !important;
    margin-left: 7px;
    margin-top: 5px;
    margin-bottom: 6px;
}

.no-margin {
    margin: 0px !important;
}

<!DOCTYPE html>
<html lang="en" ng-app="Eossyn">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="layout fluid" ng-controller="AppCtrl">
        <div class="layout-body"></div>
        <div class="layout-sidebar" ng-controller="WorldCtrl">
            <div class="controls">
                <select class="world-list" ng-model="selectedWorld" ng-options="world.worldId as world.worldName for world in allWorlds">
                    <option value="">Select...</option>
                </select>
                <hr class="no-margin" />
                <ul class="unstyled" id="charList">
                    <li ng-repeat="char in characters | filter:selectedWorld">
                        <a href="#" class="btn btn-block" ng-click="selectChar()">{{char.charName}} - {{char.charRace}} {{char.charClass}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

// Add your javascript here
var app = angular.module('Eossyn', []);
app.controller("AppCtrl", function ($scope, $http) {
    $scope.userConfig = {
        username: 'test',
        isLoggedIn: 'true'
    };
});

app.controller('WorldCtrl', function ($scope, $http) {
    $scope.allWorlds = [{
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff",
      worldName: "World 1"
    },
    {
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84",
      worldName: "World 2"
    },
    {
      worldId: "df41208e-e8d2-46c9-8299-8f37632a51f8",
      worldName: "World 3"
    }];

    $scope.characters = [{
      charClass: "Rogue",
      charName: "Vaes",
      charRace: "Human",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Warrior",
      charName: "Azash",
      charRace: "Orc",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Mage",
      charName: "Anele",
      charRace: "Ogre",
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84"
    }];
});