389 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
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.

2061 posts
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in United States
Landonw says

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

1383 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
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.

2580 posts Put a Donk On It
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+10 more
ThemeProvince says

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

1383 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
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
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in 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
  • Has referred 100+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
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
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
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
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 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