Last Centered Column in series floats right

[dhornbein]

I have a list of centered columns:

<div class="row">
    <div class="four centered column">
        ...
    </div>
    <div class="four centered column">
        ...
    </div>
    <div class="four centered column">
        ...
    </div>
</div>

The final one floats right. I would like them to all be centered.

[class*="column"] + [class*="column"]:last-child overrides .column.centered, .columns.centered and .end simply sets the column to float left.

Perhaps we could extend .column.centered, .columns.centered, .columns.centered.end to over ride the above behavior.

Perhaps there is good reason for this NOT to be the case, no big deal :)

[markcy]

Despite having the .end class, there are still issues. In @dhornbein 's example above, because he's centering the columns, even if he applies the .end class, the last column will be floating to the far left. That's because .end overrides it with a float:left. There should be a class to apply float:none for centered last columns.

I use Foundation on Wordpress sites, so most of my columns are dynamically generated and I don't have the ability to add a class of .end to my last column. I've of course overridden this with my own custom styles. As well, I often layout pages with thumbnail grids, and if I only have two posts in Wordpress (or whatever generates your content) then my last post thumbnail item is floated right, leaving a huge gap and throwing off the natural order of the thumbnail grid layout.

[class_="column"] + [class_="column"]:last-child { float: right; }

I propose that the above CSS rule be removed from Foundation. I know it's implemented to help keep columns aligned across browser inconsistencies, but I feel it's more trouble than it is helpful. Especially when dynamically generated content doesn't allow us to add a class of end.

At least, since you already assume users can manually add a class of .end, then they should be able to manually add a class of .last if they want to float the last-child column to the right. Otherwise, I think the natural column order of floating left should be default for the last column.

[hatefulcrawdad]

Hey @markcy! Thanks for the suggestion, but we're going to keep things how they are. Here's why:

When you have a .row with a full set of columns and they are all float: left you get inconsistencies with alignment on the right edge of the grid. This has to do with how browsers calculate and round percentages. For this reason, we have the last-child always float: right so that the grid looks aligned all the time.

As for you centering problem. We didn't intend for people to use three .four.centered.columns within a single row. If you'd like to have three consecutive .four.centered.columns stack on top of each other, just put them each within a separate .row.

Hope this helps!