First element on body section
Second element on body section
Third element on body section
Fourth element on body section
Header content with the main page title
Side bar for navigation and secondary content of the page

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>