I want a section which lays three widgets horizontally, Recent Posts, Recent Comments, and Top Posts. If I have them at my sidebar, then the whole page length would be going to long when reading a single post. If I can line them up since they have close widget height, the result should look good. Note that I plan to place this new section just above the original footer section.



Only need to add two parts. One is the CSS, the other is the XML.



Here is the CSS part:

#above-footer-wrapper {
  width:840px;
  clear:both;
}
#above-footer-left {
  width:270px;
  float:left;
  margin-right:15px;
}
#above-footer-middle {
  width:270px;
  float:left;
  margin-right:15px;
}
#above-footer-right {
  width:270px;
  float:left;
}


My page width is 840 pixels, you need to change it to fit yours. I evenly distribute the space to three columns which is 840 = 270 * 3 + 15 * 2. The spacing between columns is 15 pixels.



For XML part, you need to find footer

<div id='footer-wrapper'>




Add new section to be:

    <div id='above-footer-wrapper'>
      <b:section class='footer' id='above-footer-left'>
      </b:section>
      <b:section class='footer' id='above-footer-middle'>
      </b:section>
      <b:section class='footer' id='above-footer-right'>
      </b:section>
    </div>

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'>
      </b:section>
    </div>


Once you done, save the template and switch to Page Element tab, that should look like:





Here is a screenshot about how it looks like:





Note that the color borders are for easy understanding only.



You can scroll down to see this 3-column section in practical  use.