Column shortcode challenge

I have just been finishing up a theme and found myself doing some funky css that got me thinking.

Just about every WordPress theme on themeforest includes column shortcodes with each width of column split into a normal version of the shortcode (e.g half) and a version for when the column is used as the last column in a row (e.g. half_last). Some, like me, have begun to change the “last” variation into an option but can this be taken further?

Has anyone ever tried to use CSS to automatically detect when the margins need to be removed in order for the the columns to fit on a page? If so what method did you use and if not what problems did you run into?

I have ideas of how it could be done and I think it’s possible. It’s something I will be trying in future themes but I am interested to know if anyone else has attempted it.

Maybe put the columns in a container with a negative right margin that equals the margin of a column. Haven’t tried but that should work.

So if the columns have a margin of 20px, the container will have right margin of – 20px. But then the user will have to use a wrapping shortcode (or the raw HTML code) to wrap the columns.

It can also be done with CSS or jQuery by getting the 2nd, 3rd, 4th and so on column depending on what’s used (one half, one third…) and changing the margin. But the CSS solution wouldn’t work on IE and the jQuery solution wouldn’t work if JS is turned off. Now if a combination of these 2 is used you’ll get a better compatibility, it will fail only on IE if JS is turned off.

Just my 1/25 of Curtis Jackson.

Mine doesn’t need any of that, it just fits perfectly.

Haha you can’t fit columns perfectly without braking the 2 imaginary vertical lines on the sides Unless you don’t have margins to separate them.

just add an extra class to the last column using php.

thePhoenix said
just add an extra class to the last column using php.

That’s a bit of a hard job

We need a regex guy here, anybody?

$(document).ready(function(){
    var $sections = $('.entry').find('.section');//Finds  all the column divs
    $sections.wrapAll('<div class="section-wrapper">');//Wraps all the columns
});
</div>

A few obvious problems with that would be the fact that it just won’t work with javascript turned off. And more importantly, it becomes rather impossible to position any elements on the page (p, blockquote, ect…) around the columns.

Could you do something with php do test when the combined widths of the columns is a certain number and then apply a new class to the last one, and have that function repeat for each row, maybe?

I don’t know, that’s all I got.

This can easily be done in CSS , using :first-child or :last-child. The :first-child property is best supported (from IE7 and on all other browsers), so you can do something like that:

.column {
    margin-left: 20px;
}
.column:first-child {
    margin-left: 0;
}

And if you want to bring support for IE6 , you can add an alternative class and just a bit of jQuery:

.column-first-child {
    margin-left: 0;
}

$(document).ready(function() {
    $('.column:first-child').addClass('column-first-child');
});

We’re getting somewhere but we would still need to wrap it up in a container that will contain the floats and actually get the first column of a row.

lol is it me the only who doesn’t have to use “half_last” “third_first” etc… . Simply because I make the outer container larger by the margin size, say Im using 960 gs. I make my container 960px instead of 940px, so when you have two 460px divs with 20px margin each, they stack nicely without having to use the “alpha” and “omega” classes