How to switch sidebar from left to right?

Okay, I am trying to get the sidebar column from this css code to be displayed on the right instead of the left, what is the best way to do that?? (I want to be able to learn how to switch it if need be. Also for instance, if I wanted to add a column in the future, and I needed to define it to the opposite side of the column that is currently displayed.)

#contentWrapper {
	float:right;
	width:100%;
}

#content {
	margin-left:200px;
	padding-top:1em;
	background:#???????;
}

#sideBar {
	position:relative; 
	float:right;
	width:192px;
	margin-right:-192px; 
	padding-top:1em;
	background:#???????;
}

Code (markup):

thanks for the help!

 

Flip your floats, flip your margins.

#contentWrapper {
	float:left;
	width:100%;
}

#content {
	margin-right:200px;
	padding-top:1em;
	background:#???????;
}

#sideBar {
	position:relative; 
	float:left;
	width:192px;
	margin-left:-192px; 
	padding-top:1em;
	background:#???????;
}

Code (markup):

 

Also, it is useful to see the HTML code too, as this could technically not be working at all.

But yes, float left or float right will decide which side the div is 'floated'. It seems strange to have a minus margin the width of the div though?

 

Thing is, I know what his HTML is - he got it from me

<div id="contentWrapper"><div id="content">
Page Content Here
<!-- #content, #contentWrapper --></div></div>

<div id="sideBar">
Sidebar content here.
<!-- #sideBar --></div>

It's one of the few practical ways to do a content before the sidebar layouts with a fluid content area in DIV+CSS layouts. It's also versatile enough that with a position:relative; left:-100%; you can do a three column layout with it. It's a play on "holy grail" that uses an extra div instead of six lines of CSS hacks/trickery - I find it simpler/easier to work with and less prone to breakage cross-browser.

I explain how it works here:
http://battletech.hopto.org/html_tutorials/3coldiv/template.html

Basically, the 100% width outer container float leaves 0px free for anything to float next to it. The negative margin on the sidebar equal to it's width tells the browser the element is 0px wide... so it fits. The margin on the #content div is just there to push the content out from underneath #sidebar.

Sneaky, but it works, and lets you put your columns in any order you like while still having the content one fluid - and appearing BEFORE the sidebars (which on many layouts contain less important information). Good for SEO, good for separation of presentation from content.