Sidebar at Bottom in IE but not Firefox

I’m having a problem that others have commented on before. I’m using my tweaked version of the Kubrick theme for my blog
http://www.rudyrucker.com/blog

I noticed recently that although my sidebar shows up fine in Firefox 3.0.1 on a Windows XP machine, it drops to the bottom of the page in IE 7.

I’ve read all the other sidebar problem posts on the forum, and I’m aware of the notion that you want page.width to be >= narrowcolumn.width + sidebar.width. Actually, I’m finding that this doesn’t guarantee the sidebar showing up in even Firefox. I think there might be interactoins with padding and margins.

What I’m finding to work is to not specify sidebar.width, and then presumably Firefox is smart enough to allocate whatever space is available to the sidebar. But no matter what I do, IE won’t show it.

Here’s what I think is the relevant part of the code from
http://www.rudyrucker.com/blog/wp-content/themes/default/style.css

/*----------------RUDY WIDTH SPACING STUFF--------------*/
/* The page contains the narrowcolumn and the sidebar.  so I believe
I need to be sure that
	page.width >= narrowcolum.width + sidebar.width.
I have a recurring issue of spacing here, as my sidebar sometimes drops to the bottom of the page in Windows XP with Internet Explorer 7, even though I've tried quite a few things.  Sidebar is ok in Firefox.  */

#page {
	background-color: white;
	margin: 40px auto;         /* Was 20 px auto; Rudy. */
	padding: 0;
	width: 865px;      /* Was 880 px.  Rudy. Remember that I want
		page.width  >= 	narrowcolumn.width + sidebar.width */
	border: 2px solid black;
	}

.narrowcolumn {
	float: left;
	padding: 0 20px 20px 45px; /* t-r-b-l. Pads on the left and right in the
		post area. Right pad pushes the sidebar over, but doesn't change
		the text. Was 0 20px 20px 45px Rudy */
	margin: 0; /* Does  nothing.   t-r-b-l  Rudy */
	width: 615px;      /* Was 605.  I want to have
		.narrowcolumn.width >  picture width + image padding.
		My picture width is 600, and I in img.alignleft I have padding of 4
		and right margin of 6, so if padding gets (maybe) counted twice,
		I uess I need more than 614 so as not to have to shrink
		the picture. */
	}

#sidebar
{
	padding: 20px 20px 10px 20px;      /* Top Right Bottom Left.
			Was 20px 20px 10px 20px.  Seems to have little effect. Rudy.  */
	margin-left: 0px;   /* Was 680. Doesn't  seem to matter what I
		put here, so I just make it 0.  */
	/*width: 250px;*/
		/*  a sidebar.wicth of  250 "SHOULD" fit, but the sidebar drops
		to the bototm if I use that, or even if I use 200px.
		I believe I need
		page.width >= narrowcolum.width + sidebar.width, but maybe I
		have to count padding, too, or there's something about the size
		of the widget objects in the sidebar not fitting?
		In any case, I find that if I don't specify ANY sidelbar.width value,
		then, apparantly by default, you'll get a sidebar width that fits,
		at least in Firefox anyway, but maybe not in IE.
		*/
	background-color: #FEFFFE;
	}

/* As mentioned above, narrowcolumn is used in the defualt blog view with a sidebar.  The widecolumn is used when you click on a particluar blog entry, or access it through a link, and the entry comes up with no sidebar and with the comments displayed.  I choose to make the text a bit larger and more generaously spaced in the widecolumn mode.  Rudy. */

.widecolumn {
	float: left;
	padding: 0 0px 20px 45px;  /* Top Right Bottom Left.  Was 0 0 20px 45px Rudy */
	margin: 0; /* was 0px 0 0, only 3 entries.  t-r-b-l  Rudy */
	width: 705px;       /* Was 605.  Has to be > 600 to hold big pix. Since you have no sidebar
		in the widecolumn view, width can be anything up to page.width.  Rudy */
	}

	/*------------------------END RUDY WIDTH SPACING STUFF------------- */