@import compass/layout/stretching

$body-margin-top: 4em
$body-margin-left: 15em
$main-heading-height: 2em
$footer-height: 2em
$sub-top: $body-margin-top - ($main-heading-height + 0.05em)

body
  margin: $body-margin-top 0 0 $body-margin-left

body.has-footer
  margin-bottom: $footer-height + 1em

#main-header
  border-bottom: 0.1em solid #CCC - 10
  background: #CCC
  width: 100%
  height: $main-heading-height - 1em
  padding: 0.5em 0
  position: fixed
  left: 0
  top: 0
  z-index: 3

#side-bar
  border-right: 0.1em solid #CCC - 10
  background: #CCC + 20
  width: $body-margin-left
  position: fixed
  left: 0
  top: $sub-top
  bottom: 0
  z-index: 2

#sub-header,
#footer
  background: #CCC + 20
  height: 1em
  padding: 0.5em 0
  position: fixed
  left: $body-margin-left
  right: 0
  z-index: 1

#sub-header
  top: $sub-top

#footer
  height: $footer-height
  bottom: 0

@import compass/layout/stretching

$main-heading-height: 2.5em
$sub-heading-height: 2.5em
$footer-height: 2.5em
$body-margin-top: $main-heading-height + $sub-heading-height
$body-margin-left: 15em

body
  margin: $body-margin-top 0 0 $body-margin-left

body.has-footer
  margin-bottom: $footer-height + 1em

#main-header
  border-bottom: 0.1em solid #CCC - 10
  background: #CCC
  width: 100%
  height: $main-heading-height
  position: fixed
  left: 0
  top: 0
  z-index: 3

#side-bar
  border-right: 0.1em solid #CCC - 10
  background: #CCC + 20
  width: $body-margin-left
  position: fixed
  left: 0
  top: $main-heading-height
  bottom: 0
  z-index: 2

#sub-header,
#footer
  background: #CCC + 20
  position: fixed
  left: $body-margin-left
  right: 0
  z-index: 1

#sub-header
  top: $main-heading-height
  height: $sub-heading-height

#footer
  height: $footer-height
  bottom: 0

#content
  width: 100%
  float: left

Tweak the layout to actually show the content properly.
Tweak the layout to actually show the content properly.
