Two pane - Horizontal

Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.

Example Code


<div class="two-pane-horizontal">
<div class="pane-top">
  <div class="pane-wrapper">
    <div class="pane">
      <h3 class="title">Two pane - Horizontal</h3>
      <section>
        <!--Content Goes Here-->
      </section>
    </div>
  </div>
</div>
<div class="divider twopane-divider-horizontal"></div>
<div class="pane-bottom">
  <div class="pane-wrapper">
    <div class="pane">
      <div class="pane-header-bg">
        <h3 class="title">Bottom Panel: Horizontal</h3>
      </div>
      <div class="bottom-content-panel">
        <!--Content Goes Here-->
      </div>
    </div>
  </div>
</div>
</div>

Bottom Panel: Horizontal