Box model problem...?

1

i’ve got a two collum layout using divs. i also came across some code that always keeps the footer at the bottom of the page, which uses %percentages and a spacer.

i cant seem to get the “right_col” to line up properly with the edge of the container in both IE and FF. there seems to be a 3pixel differnce, which i assume are the borderrs from the nav_bar/header (2pixels) and the width of the spacer (1pixel)

i dont have a good grasp of exactly “how” the %percentage spacer thing is affecting the flow of the page. but i’m trying to get pixel perfect alignment in both IE and FF.

i’m hoping somebody could shed some light on how to get the “right_col” to line up nicely alongside the edge of the container div in both IE and FF!
*
(and FYI, i’m also familiar with the box model hack - but not sure how i might apply it here to get the colunms to line up correctly)*

**thanks for any help or insight!

**[color=Red]mm… and i’ll also send the code as an attachement in case it doenst show up below… :block:[/color]


body { text-align: center; background-color:#fff; margin:0px; margin-bottom: 0px; }

#container {
	text-align: left;
	margin: 0 auto;
	width: 770px;
	background-color:#FFCC33;
	margin-bottom: 0px;
}


#nav_bar {  /*navigation*/
	border: 1px solid black;
	margin: 20px 0px 20px 0px;
	padding: 20px;
}



#header {
	border: 1px solid black;
	margin: 20px 0px 20px 0px;
	padding: 20px;
}



#left_col {
	width: 360px;
	margin-left: 0px;
	float: left;
	display: inline;
	background-color:#0099FF;
}


#right_col {
	margin-left: 517px;  /*3pixel differnce in IE and FF */
	width:250px;
	background-color:#FF9900;
}





#spacer{
	height: 95%;
	float: left;
	width: 1px;
	font-size: 1px; /* to make sure width is not overridden */
	padding: 0;
	margin: 0;
	background-color: red; /* visual effect only */
	}


#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}

<div id="container">
  <div id="spacer"></div>
  <div id="nav_bar">Nav Bar</div>
  <div id="header">header</div>
  <div id="left_col">content on left goes here</div>
  <div id="right_col">right side content</div>
  <div id="footer">footer</div>
</div>