3 column page problem

HTML & CSS
1

I read some tutorials about how to set up a 3 column page in css, but I am having some issues with how the <div>'s are lining up. On the right bar, there is a space between the nav bar and column, and on the left there is a space between the column and footer.

Here is my style:

html, body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 13px;
}

#header {
	background-image: url('images/logo_bg.jpg');
	height: 195px;
	width: auto;
}

#navbar {
	background-image: url('images/nav_bg.jpg');
	height: 43px;
	width: auto;
	padding: 0px 10px 0px 10px;
	line-height: 43px;
}

#leftcolumn {
	background: #666666;
	width: 150px;
	float: left;
	height: 100px;
}

#content {
	background: #FFFFFF;
	width: auto;
	float: left;
	height: 100px;
}

#rightcolumn {
	background: #666666;
	width: 150px;
	float: right;
	height: 100px;
}

#footer {
	background: #CCCCCC;
	width: auto;
	height: 125px;
	clear: both;
}
2

I believe I figured out the problem. I read an article that says I should call the left bar, right bar, then middle, because CSS is order dependent. Seemed to work for now, but is this the long-term fix?