AngularPanelDemo

HTML

<div class="wrapper">
  <div class="category-pane">
    <ul>
      <li><a href="/category1">Category one</a></li>
      <li><a href="/category2">Category two</a></li>
      <li><a href="/category3">Category three</a></li>
      <li>...</li>
    </ul>
  </div>
  <div class="products-pane">
    <i>list of products from selected category</i>
  </div>
  <div class="product-details-pane">
    <i>Product info goes here</i>
  </div>
  </div>
</div>

CSS

.wrapper {
  
}
.category-pane, .products-pane, .product-details-pane {
  float: left;
  color: #999;
  border: 1px solid #ddd;
  overflow: auto;
  min-height: 200px;
}

.category-pane {
  padding-bottom: 20px;
}
.products-pane {
  margin: 0 20px;
  padding: 10px;
}
.product-details-pane {
  padding: 10px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  border-bottom: 1px solid #ddd;
  
}