3-Col Issue

[obrienkev]

Hi all,

How do I get the 3columns to align properly? At moment 3rd (rightcol) is pushed below main content.

 /*******************************************
  Content div  
 *******************************************/
 #content {
 		   width: 540px;
 		   margin: 20px 20px 10px 10px;
 			float: right;
 			background: transparent;
 }
 
 /* mac hide \*/
 * html #content, * html #content p, * html #content ul, * html #content h1 {height:1%}
 /* end hide*/
 
 
 /*******************************************
  Sidebar div - Left Column
 *******************************************/
 #sidebar {
 		float: left;
 		width: 180px;
 		margin: 20px 0 10px 0;
 		padding: 0;
 		border-right: 1px dotted #ccc;
 		background: transparent;
 }
 /*******************************************
   Rightcol div - Right Column
  *******************************************/
 #rightcol {
 	float: right;
 		width: 180px;
 		padding-left: 10px;
 }

 <div id="content">
 
 <h1>Flowers</h1>
 
 <p>On the following pages, which you will find in the menu, you get a lot of 
 information about all our services.</p>
 
 <div id="rightcol">
 
 <h2>right</h2>
 
 <ul id="sidemenu">
 		<li><a href="#">home</a></li>
 		<li><a href="#">about</a></li>
 		<li><a href="#">contact</a></li>
 </ul>
 
 </div> <!-- end Rightcol div -->
 
 </div>  <!-- end Content div -->
 
 
 <div id="sidebar">
 
 <h2>Menu</h2>
 
 <ul id="sidemenu">
 		<li><a href="#">Weddings</a></li>
 		<li><a href="#">Funerals</a></li>
 		<li><a href="#">Seasonal Floristry</a></li>
 		<li><a href="#">Cutflowers</a></li>
 		<li><a href="#">Potplants</a></li>
 		<li><a href="#">Calendar Occasions</a></li>
 		<li><a href="#">Accessories</a></li>
 </ul>
 
 </div> <!-- end Sidebar div -->