741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes 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 :)

And then you apply margin right or padding to every other element on the page to make sure it will align? How do you do that?

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 :)
And then you apply margin right or padding to every other element on the page to make sure it will align? How do you do that?

Well any content is inserted in a page which uses grid system shortcodes must be wrapped by a grid system shorcode (usually the [full] shortcode). I think this makes sense and much more easier for the user to deal with than the [half_last] or [third_last] etc… as the user may forget to do that and if so, the whole layout will collapse.

31 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in United Kingdom
+2 more
JollyGoodThemes says

This is a simple way of doing it

#container { background: grey; margin: 0 auto; width: 960px; height: 100%; } .col-4 { background: black; float: left; height: 300px; margin: 0 20px; width: 200px; }

The important parts are the width, margin and floats. I think this is what wizylabs was describing.

Edit: How do you format code nicely on these forums? I wrapped it in ‘code’ tags but it all appears on one line.

1383 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
wpCanyonThemes says
It goes in pre not code
Second line
Third line
Fourth line
:)
31 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in United Kingdom
+2 more
JollyGoodThemes says

It goes in pre not code
Second line
Third line
Fourth line
:)

Ah ok cheers! :) It won’t let me edit my post now though…I guess there must be a time limit on it.

and I just noticed the formatting help section now :|

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says

you can always go for jQuery to enhance cross-browser compatibility.

1479 posts The right tools with none of the gimmicks
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 more
PixelBin says

It’s not that difficult. This is old news. You wrap the columns in a DIV with a width that is (width of margin)-pixels bigger than the columns would normally take up. While you’re at it, you can give it an overflow: hidden; so the content below doesn’t ride up under the columns (because they’re floated, so a clear fix would be required either way).

jQuery is not a good solution because depending on how many scripts you have and how fast everything loads, your site will look broken for a few seconds upon loading.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

It’s not that difficult. This is old news. You wrap the columns in a DIV with a width that is (width of margin)-pixels bigger than the columns would normally take up. While you’re at it, you can give it an overflow: hidden; so the content below doesn’t ride up under the columns (because they’re floated, so a clear fix would be required either way). jQuery is not a good solution because depending on how many scripts you have and how fast everything loads, your site will look broken for a few seconds upon loading.

But then users still have to wrap the columns with something (some other shortcode). I think that the most out of the box solution would be PHP , have someone done something like that?

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says

It’s not that difficult. This is old news. You wrap the columns in a DIV with a width that is (width of margin)-pixels bigger than the columns would normally take up. While you’re at it, you can give it an overflow: hidden; so the content below doesn’t ride up under the columns (because they’re floated, so a clear fix would be required either way). jQuery is not a good solution because depending on how many scripts you have and how fast everything loads, your site will look broken for a few seconds upon loading.

Most sites look broken before fully loading it :P

1383 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
wpCanyonThemes says

Well it seems to be either with the “last” or with a wrapping div, in both cases use of shortcodes.

I guess the easiest way for the users would be to use none of those and then with a fairly complex PHP code add the “last” or the wrapping div. But that would mean fetching all the column shortcodes and then calculating when a row has been filled. So if anybody is good with regex, he can write a code that will fetch all column shortcodes and then we can all figure out the best way to do the logic behind calculating.

I guess every column shortcode would have a number from 1 to 10 (one half is 5, one third is 3.33…) and then using a foreach go through all of them, and when the sum becomes bigger then 9.9 close the wrapping div and set the sum back to 0 and open up the wrapping div again or add “last” to that column shortcode that’s making the sum bigger then 9.99.

I hope i explained it properly :)

In my opinion that’ll make it easier for theme users to use columns and not worry about “last” or wrapping shortcode.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by