Compass will change your life

compass-01.html

<style type="text/css">
  .clearfix:after
  {
    /*clearfix styles here*/
  }

  #sidebar,
  #content
  {
    float: left
  }
</style>

<div id="page" class="clearfix">
  <div id="sidebar">
    blah
  </div> <!-- /#sidebar -->
  <div id="content">
    blah blah
  </div> <!-- /#content -->
</div> <!-- /#page -->

compass-02.scss

$poppy-red     : #ac3e2b;

$page-width    : 800px;
$content-width : 500px;
$gutter-width  : 30px;
$sidebar-width : $page-width - $content-width - $gutter-width;

#page
{
  width: $page-width;
}

#sidebar, #content
{
  float: left;
}

#content
{
  width: $content-width;
}

#sidebar
{
  margin-right: $gutter-width;
  width: $sidebar-width;
}

.error-feedback
{
  color: $poppy-red;
}

compass-03.css

#page
{
  width: 800px;
}

#sidebar, #content
{
  float: left;
}

#content
{
  width: 500px;
}

#sidebar
{
  margin-right: 30px;
  width: 270px;
}

.error-feedback
{
  color: #ac3e2b;
}