I am attempting to make two columns with CSS. I've done this in the past but for some reason my columns are not visually correctly in firefox but looks perfect in both Chrome and Safari.

Any suggestions are appreciated and welcomed.

Thank You in Advance!

CSS:
Code:
/*wrapper css*/
#wrapper{margin:0 auto; width:750px; }

/*columns css */

#content {display: table;}

#mainContent {
			  position: relative;
			  border: 1px solid #CCC;
			  width: 300px;
			  margin-left: 15px;
}
			  			  			  			  			  
aside{
	display: table-cell;
	position: relative;
	width: 450px;
	}

/* clearfix css*/

.clearfix:after{
	clear: both;
	display: block;
	height: 0px;
	line-height: 0;
	visibility: hidden;
}	

.clearfix:before,.clearfix after{
	content: " ";
	display: block;
	height: 0px;
	visibility: hidden;
}
HTML:
Code:
 <div id="wrapper">
  		
		<h2>HEADER</h2>
		
		<a class="blue" href="#">LaunchPad</a> <span class="reviews">Reviews</span>
		 
				<h1>Reviews</h1>

	<div id="content">
		
	<div class="clearfix"></div>
	   
	    <aside><!-- left side begin -->
	    
			<section>
				<article id="comment">
				<h3>Best restaurant ever!</h3>
				<p class="comment">Food is amazing, staff is very friendly.</p>
				<span class="dash">-</span> <a class="qa" href="#">qa</a> 
			    </article>
			</section>
			
			<section>
		        <article id="comment">
		        <h3>Pretty good food</h3>
				<p class="comment">Nice atmosphere</p>
				<span class="dash">-</span> <a class="qa" href="#">qa</a>
			    </article>
			</section>
			
			<section>
			    <article id="comment">
			    <h3>Don't go here</h3>
				<p class="comment">They put sardines in the pasta!</p>
				<span class="dash">-</span> <a class="qa" href="#">qa</a>
			    </article>
			</section>
			
		</aside><!--left side-->
		
		<div class="clearfix"></div><div id="mainContent"> <!-- mainContent begin-->
		<h2 class="left">3 Customer Reviews</h2>
		
				
				</div><!-- maincontent end-->
		</div><!-- content-->
  </div><!--wrapper-->