Continuing problem with alignment

Question

It is a mystery to me why this problem returned. You can see in the link below that the tops of the Main Content and the Sidebar are not aligned with each other. I had this fixed by adding the overlap:hidden rule to the menubar#1.
http://www.openrangeimaging.com/Test/Gravity-Test/index.html
Then I made the sidebar have round corners. The problem returned. I'm starting to think it may be demonic possession. I have tried all sorts of stuff with the css but just cannot get the MainContent to move up to be aligned with the top of the Sidebar.
I can add 15px top margin to the Sidebar1 and that moves it down into alignment with the Main Content. (15px is the size of the round corner images that make up the corners of the Sidebar. Coincedence?)  It looks ok but it doesn't seem quite right. I'm going to have some of the pages have 2 equal size columns and some 1 large column, may even have a 3 column page. I got the feeling that having to add the top margin to one and not the other is going to cause problems.
Additionally if you click on some of the links to the other pages that I made from the template page prior to adding the round corners you can see that the MainContent moves up to where it should be. (I guess those pages haven't changed to reflect the updated template that they are based on because the Sidebar and MainContent are editable regions in the template?)
Any suggestions on how to fix this? As always thanks for any help

Answer 1

markf12 wrote:
It is a mystery to me why this problem returned. You can see in the link below that the tops of the Main Content and the Sidebar are not aligned with each other. I had this fixed by adding the overlap:hidden rule to the menubar#1.
http://www.openrangeimaging.com/Test/Gravity-Test/index.html
Then I made the sidebar have round corners. The problem returned. I'm starting to think it may be demonic possession. I have tried all sorts of stuff with the css but just cannot get the MainContent to move up to be aligned with the top of the Sidebar.
I can add 15px top margin to the Sidebar1 and that moves it down into alignment with the Main Content. (15px is the size of the round corner images that make up the corners of the Sidebar. Coincedence?)  It looks ok but it doesn't seem quite right. I'm going to have some of the pages have 2 equal size columns and some 1 large column, may even have a 3 column page. I got the feeling that having to add the top margin to one and not the other is going to cause problems.
The alignment issue is being cause by the 'commented out' section of code below:
Change from this:
<!--<div id="sidebar1">
  <h3>GRAVITATION</h3>
    <p>Write store specials and other content in this space. To be updated on a semi-regular basis </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, </p>
    <!-- end #sidebar1 -->
<!-- </div>-->
To this:
<!-- <div id="sidebar1">
  <h3>GRAVITATION</h3>
    <p>Write store specials and other content in this space. To be updated on a semi-regular basis </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, </p>
    </div> -->