741 posts
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • 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 :)
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
  • Sold between 10 000 and 50 000 dollars
  • United Kingdom
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Bought between 1 and 9 items
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
  • 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
It goes in pre not code
Second line
Third line
Fourth line
:)
31 posts
  • Sold between 10 000 and 50 000 dollars
  • United Kingdom
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Bought between 1 and 9 items
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
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 more
DDStudios says

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

1478 posts The right tools with none of the gimmicks
  • Sold between 50 000 and 100 000 dollars
  • Elite Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • United States
+1 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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Contributed a Blog Post
  • Elite Author
  • Exclusive Author
+5 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
  • 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

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