Advanced Search

Return to Snippet

Revision: 51191
at September 16, 2011 13:44 by Jaquers
Initial Code 
@mixin wpSetColWidth($col-n: 2, $gutter-width: 10px, $area-width: 760px) {
	$computed-width: floor(($area-width - (($col-n + 1) * $gutter-width)) / $col-n);
	$remainder: $area-width - ($computed-width * $col-n) - ($gutter-width * ($col-n + 1));

	width: $computed-width;
	margin: $gutter-width 0;
	margin-left: $gutter-width;
	
	&:last-child {
		width: $computed-width + $remainder;
	}
}

// So if I wanted to use this I would set up some elements I want to align in columns.

ul.columns {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		float: left;
		display: block;
		padding: 0;
		margin: 0;
		@include wpSetColWidth(3, 10px, 500px);
	}
}

// Which compiles to:

ul.columns {
  list-style: none;
  padding: 0;
  margin: 0; }
  ul.columns li {
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    width: 153px;
    margin: 10px 0;
    margin-left: 10px; }
    ul.columns li:last-child {
      width: 154px; }

// See how it compensates for the uneven division and adjusts the last item in the list? Sweet.
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
I created this for a project I'm working on, and specifically left it bare-bones to maximise flexibility. Basically this mixin accurately calculates proper widths for each column when passed the available area, number of columns desired, and gutter width. 

Uses last-child, so it might be a pixel short in IE7 - however, the width will never be too large as it rounds down. So no float drops. Plus, who cares about IE7.. or IE at all for that matter?

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Mixin for Floated Columns

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
SASS