www.webdeveloper.com
Results 1 to 2 of 2

Thread: aligning columns using CSS works in Chrome

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    77

    aligning columns using CSS works in Chrome

    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-->

  2. #2
    Join Date
    May 2012
    Posts
    77
    It was the clearfix that was causing the issue.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles