Posted By

Jaquers on 09/16/11


Tagged

floats columns mixin


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

mattfarrow
kjensen


Mixin for Floated Columns


 / Published in: SASS
 

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?

  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  

You need to login to post a comment.