Advanced Search

Mixin for Floated Columns

/ Published in: SASS
Save to your folder(s)
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?

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. @mixin wpSetColWidth($col-n: 2, $gutter-width: 10px, $area-width: 760px) {
  2. 	$computed-width: floor(($area-width - (($col-n + 1) * $gutter-width)) / $col-n);
  3. 	$remainder: $area-width - ($computed-width * $col-n) - ($gutter-width * ($col-n + 1));
  4.  
  5. 	width: $computed-width;
  6. 	margin: $gutter-width 0;
  7. 	margin-left: $gutter-width;
  8.  
  9. 	&:last-child {
  10. 		width: $computed-width + $remainder;
  11. 	}
  12. }
  13.  
  14. // So if I wanted to use this I would set up some elements I want to align in columns.
  15.  
  16. ul.columns {
  17. 	list-style: none;
  18. 	padding: 0;
  19. 	margin: 0;
  20.  
  21. 	li {
  22. 		float: left;
  23. 		display: block;
  24. 		padding: 0;
  25. 		margin: 0;
  26. 		@include wpSetColWidth(3, 10px, 500px);
  27. 	}
  28. }
  29.  
  30. // Which compiles to:
  31.  
  32. ul.columns {
  33.   list-style: none;
  34.   padding: 0;
  35.   margin: 0; }
  36.   ul.columns li {
  37.     float: left;
  38.     display: block;
  39.     padding: 0;
  40.     margin: 0;
  41.     width: 153px;
  42.     margin: 10px 0;
  43.     margin-left: 10px; }
  44.     ul.columns li:last-child {
  45.       width: 154px; }
  46.  
  47. // See how it compensates for the uneven division and adjusts the last item in the list? Sweet.

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.