I've annotated the lines with specific descriptions.
Overall the things it does are:
- Account for subpixel rounding errors
- Create a new formatting context and clear floats
Take care of IE6/7 bugs
.grid__col--last { display: table-cell; /* creates a new formatting context [1] */ *display: block; /* protect old IE from table-cell */ *zoom: 1; /* create a new formatting context for IE (via hasLayout) */ float: none; /* removing the float which is on a normal column */ _position: relative; /* next three lines fix an IE6 3px float bug [2] */ _left: -3px; _margin-right: -3px; width: auto; /* flexible width so the last col can adjust to subpixel rounding errors &:after { /* all this bit opens the table cell up so it takes full width - floated cols [3] */ content: "...."; visibility: hidden; clear: both; height: 0 !important; display: block; line-height: 0; } }
I think you are missing some bits though. You need the base styles from .col
in order to understand last col
.