Tables are messing up my layout

[koager]

I wrote my layout using <div> but then in my main body <div> I inserted a table to organize my items in it. However, now the table is pushing everything to the left by 5px or so.

Without the table it moves back correctly, but I need the organization.


another issue I have is that I have <div id="body">, which is the center white part where all my text and stuff goes (red at the moment, as seen in the pics so I can see it), and then inside tag that I put <div id="main-bodycol">
however my container doesn't stretch all the way to the bottom encompassing everything as I need it to to create a white background

[koager]

My center piece seems to be shifting over only when i have 2+ rows in my table, which seems to be a strange issue.

This is what my basic toned down code of the body and table consists of:

<div id="body">
  	 <!--#include FILE="portfolio-nav.shtml" -->
<div id="body-maincol">
 <table>
      	<tr>
          <td>image</td>
          <td>description</td>
        </tr>
        <tr>
          <td colspan="2"><hr size="1" noshade></td>
        </tr>
</table>
</div>
</div>

and I'm still having trouble with it being "inside" the <div id="body">
I have #body-maincol and #portfolio-nav floating for the layout. It should still work as I've seen it working among other websites. If I take out the float, it does go inside the #body but my #body-maincol does really weird stuff such as falling beneath #portfolio-nav or not stretching enough correctly when it should.

[koager]

ahahaha. -headdesk-
it's because my page got too long and the scrollbar showed up which pushed everything to the left. Not sure if there's a way around this but what I found a way around it by setting a separate condition for the margins on specific pages of my website.