743 posts
  • Elite Author
  • Weekly Top Seller
  • Featured Item
  • Most Wanted Winner
+5 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
  • 6 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 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
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 1
  • Trendsetter
+3 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
  • 6 Years of Membership
  • Affiliate Level 2
  • Collector Level 2
  • Exclusive Author
+1 more
wpCanyonThemes
says
It goes in pre not code
Second line
Third line
Fourth line
:)
31 posts
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 1
  • Trendsetter
+3 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
  • 7 Years of Membership
  • Affiliate Level 5
  • Author Level 8
  • Bundle Boss
+12 more
DDStudios
says

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

PixelBin_DISABLED
PixelBin_DISABLED Recent Posts Threads Started
1479 posts The right tools with none of the gimmicks
  • Affiliate Level 4
  • Beta Tester
  • Collector Level 2
  • Weekly Top Seller
+5 more
PixelBin_DISABLED
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.

743 posts
  • Elite Author
  • Weekly Top Seller
  • Featured Item
  • Most Wanted Winner
+5 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
  • 7 Years of Membership
  • Affiliate Level 5
  • Author Level 8
  • Bundle Boss
+12 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
  • 6 Years of Membership
  • Affiliate Level 2
  • Collector Level 2
  • Exclusive Author
+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.

by
by
by
by
by
by