386 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
EugeneO says

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.

1383 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
wpCanyonThemes says

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.

2057 posts
  • Has been a member for 4-5 years
  • Bought between 50 and 99 items
  • Exclusive Author
  • United States
Landonw says

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

1383 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
wpCanyonThemes says

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.

2566 posts Put a Donk On It
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • United Kingdom
  • Exclusive Author
  • Attended a Community Meetup
  • Repeatedly helped protect Envato Market against copyright violations
  • Referred between 200 and 499 users
+5 more
ThemeProvince says

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

1383 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
wpCanyonThemes says

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?

60 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • United States
Potshot says
I guess you could add the wrapping div with javascript and then just do the negative right margin
$(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.

76 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • France
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
  • Bought between 1 and 9 items
displayinline says

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');
});
1383 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Serbia
wpCanyonThemes says

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.

1012 posts
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 more
wizylabs says

lol is it me the only who doesn’t have to use “half_last” “third_first” etc… :D. 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 :)

by
by
by
by
by
by