Result when using elastic layouts

Elastic automatic layouts provides an implementation(not copy) of the ideas behind css layouts. This module can organize content inside a layout markup using only css classes. Check the original structure of this page bellow and this is the result that you obtain.

Original structure of the page

    <div class="unit position-body">
      First element on body section
    </div>
    <div class="unit position-body">
      Second element on body section
    </div>
    <div class="unit position-body">
      Third element on body section
    </div>
    <div class="unit position-body">
      Fourth element on body section
    </div>
    <div class="unit position-header">
      Header content with the main page title
    </div>
    <div class="unit columns position-footer">
      <div class="column">footer content</div>
      <div class="column">footer content</div>
      <div class="column">footer content</div>
    </div>
    <div class="unit position-sidebar">
      Side bar for navigation and secondary content of the page
    </div>

    <div class="unit horizontal-center" style="width:950px;">
      <div class="display header"></div>
      <div class="columns layout">
          <div class="column elastic display body"></div>
          <div class="column fixed display sidebar" style="width:300px;"></div>
      </div>
      <div class="display footer"></div>
    </div>