First off--you've got some serious HTML errors on your page. This chunk:
CODE
<div id="banner">
<img alt="NewBlogBanner2.jpg" src="http://riehlworld.net/archives/images/NewBlogBanner2.jpg" width="640" height="126" border="0" align="left"/>
<img alt="kati-feathered.jpg" src="http://riehlworld.net/archives/images/kati-feathered.jpg" width="320" height="151" border="0" align="right"/>
</div>
must appear after the BODY tag. I'm surprised it's appearing at all.
(from here on out, read {squiggly braces} as angle brackets)
Open your main index. Figure out which chunk of content you want on the left, and which on the right. Remove the old {div id="links"} tag and its closing tag; wrap the two chunks in (for example) {div id="sidebar1"} and {div id="sidebar2"}, making sure to close each div correctly. Do not nest one in the other. Save and rebuild the main index.
Next: open your stylesheet. Find the #links selector. Rename that #sidebar1. Then insert a copy that whole rule, including its styling information, rename the copy #sidebar2, and change float: left; to float: right. Save and rebuild the stylesheet.