except my padding is on the left side so i can use :first-child if I want to get rid of its padding, as opposed to last-of-type which does not work in ie8.
but nested columns still have problems being centered. Its hard for me to explain so I will try and make a codepen fast...
http://codepen.io/anon/pen/fubCA
there its ugly but I think its understandable...
so how would one make nested equal sized columns?
Ah I see, well you could take the padding off the parent (the 3/4 grid), and then put anything in it that's supposed to be full width in an extra div wrapper with padding.
<div class="col-3-4 cf"> <-- remove left padding here
<div class="col"></div> <-- add left padding here instead
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
And remember to use closing tags when needed, a lot of your closing tags are actually opening tags.
lol you mean the h3's?
yeah I literally through that codepen together in seconds....
actually thats weird cause i pressed h3 tab.... i used zen coding
but i need that left padding.
there are other things in there... that are not nested columns... i wonder if i could push them over using position relative? im gonna give it a shot...
You can't wrap everything that's not in a column inside a div with padding-left? Let me know if it works with relative positioning, I doubt it because it doesn't change dimensions.
i know.
im talking what if I wanted nested columns with modules.
.col-3-4 is a column and inside we have more columns or divs or modules (in my code i used h3's and p's as the modules.... ok i know thats weird but it was just a quick thing.)
im getting closer
to get rid of the double padding from col within a col I placed the inner col in position relative and pulled it left the amount of the padding. so now it looks like there is one gutter.
then I have to get the other side to grow. so I set the module holding the inner col (called .row) and set it to absolute and a width of 100%. but now its out of the flow and thats no good...
http://codepen.io/anon/pen/fubCA
interesting paulie. you do it differently.
you are not suppose to take off padding from last-of-type when you want padding on the outside. instead you use something like:
what chris does:
.grid-pad{
padding: 20px 0 20px 20px;
}
notice the 0? thats where the last column has a padding so its not needed.
thats how I do it.
padding ends up on outside like this: [ and the last side is filled by the inner last cols padding making them perfectly equal in size and aligned too.
yours is different.... your columns are not equal. the one with paddings is significantly losing real estate compared to its brother column
dont look at the width of the columns, look at the width of the columns minus the padding
its looks beautiful.
so instead of having padding on one side as the gutter you placed padding on both sides and together they make the gutter. this keeps everything even.
it involves another layer of divs but I guess its worth it.
quite cool.
thanks
basically module holds content not columns. if you want to nest columns dont place a module. place column them place module inside for padding.
im talking to myself here... just to make sure I grasp it... don't overthink it grids my butt....
oh, I took off the margins.... I dont normally put color on the modules or columns. only whats inside that.
I also got rid of padding top and bottom on modules because it ruins my baseline.
I added a few more sized columns (cause my thumbnails were too big to fit into the size i needed. my thumbs just fit in the 20% and with padding they shrink.so its 21% now alongside a cloumn of 79%)
I wish :) That's a juvenile cayman I caught while on vacation in Surinam, kept him as a pet for a couple of weeks but released him when I had to go back home.
using percentages i create my layout.
columns within columns are hard to center. I use box-sizing:border-box; something similar to this thread: http://css-tricks.com/dont-overthink-it-grids/
except my padding is on the left side so i can use :first-child if I want to get rid of its padding, as opposed to last-of-type which does not work in ie8.
but nested columns still have problems being centered. Its hard for me to explain so I will try and make a codepen fast... http://codepen.io/anon/pen/fubCA
there its ugly but I think its understandable... so how would one make nested equal sized columns?
+1 for the laugh :)
But what is the problem exactly? They look as much centered as unnested columns to me.
ok so if | = padding:
| 3/4 | 1/4|
in the 3/4 col we have:
||1/4|1/4|1/4|1/4
that first | you see above is the padding of the outer div + this 1/4 padding and its no longer aligned.
looks like:
|3/4|
||1/4| (see double padding makes the grid look bad)
so then in my third attempt i took off the inner padding of first child only
|3/4|
| 1/4 |1/4|
but now the first column is bigger thant its brothers who still have padding!
Ah I see, well you could take the padding off the parent (the 3/4 grid), and then put anything in it that's supposed to be full width in an extra div wrapper with padding.
And remember to use closing tags when needed, a lot of your closing tags are actually opening tags.
lol you mean the h3's? yeah I literally through that codepen together in seconds.... actually thats weird cause i pressed h3 tab.... i used zen coding
but i need that left padding. there are other things in there... that are not nested columns... i wonder if i could push them over using position relative? im gonna give it a shot...
The point of the grid system (which is ChrisCoyiers) is that the columns are intended to have modules (divs) in them.
Here...http://codepen.io/Paulie-D/pen/cJBsg
You can't wrap everything that's not in a column inside a div with padding-left? Let me know if it works with relative positioning, I doubt it because it doesn't change dimensions.
i know. im talking what if I wanted nested columns with modules.
.col-3-4 is a column and inside we have more columns or divs or modules (in my code i used h3's and p's as the modules.... ok i know thats weird but it was just a quick thing.)
im getting closer
to get rid of the double padding from col within a col I placed the inner col in position relative and pulled it left the amount of the padding. so now it looks like there is one gutter.
then I have to get the other side to grow. so I set the module holding the inner col (called .row) and set it to absolute and a width of 100%. but now its out of the flow and thats no good... http://codepen.io/anon/pen/fubCA
check out the last set of cols
Check out my code pen...
The last section has 4 columns inside a 3/4 column.
There is no reason for positioning (absolute or otherwise) at all.
Hate to tell you this but you aren't really getting closer with relative position, this is as far as you get :P
interesting paulie. you do it differently. you are not suppose to take off padding from last-of-type when you want padding on the outside. instead you use something like:
what chris does: .grid-pad{ padding: 20px 0 20px 20px; }
notice the 0? thats where the last column has a padding so its not needed. thats how I do it.
padding ends up on outside like this: [ and the last side is filled by the inner last cols padding making them perfectly equal in size and aligned too.
yours is different.... your columns are not equal. the one with paddings is significantly losing real estate compared to its brother column
dont look at the width of the columns, look at the width of the columns minus the padding
I have modules which are the same width and nest quite nicely. They even have gutters.
I'm happy with it.
they are not the same width! look here https://dl.dropbox.com/u/1090829/understanding-columns.jpg
when you inspect element you are seeing full width INCLUDING the padding. your eyes are being cheated... check the metrics tab (in chrome)
whoever can make them line up gets....um....something special! ok im lying i have nothing to give!
I'll take that nothing: http://codepen.io/CrocoDillon/pen/ykCfA
hey! it looks right!! now i just have to figure out what the hell you did. it looks too simple.... DOH!
its looks beautiful. so instead of having padding on one side as the gutter you placed padding on both sides and together they make the gutter. this keeps everything even. it involves another layer of divs but I guess its worth it. quite cool. thanks
basically module holds content not columns. if you want to nest columns dont place a module. place column them place module inside for padding.
im talking to myself here... just to make sure I grasp it... don't overthink it grids my butt....
You almost got it, the gutter is from the margin on the modules. This works better if you want a background on them.
oh, I took off the margins.... I dont normally put color on the modules or columns. only whats inside that. I also got rid of padding top and bottom on modules because it ruins my baseline.
I added a few more sized columns (cause my thumbnails were too big to fit into the size i needed. my thumbs just fit in the 20% and with padding they shrink.so its 21% now alongside a cloumn of 79%)
thanks a lot. its cool: https://dl.dropbox.com/u/1090829/inmonsey/index.html Its a great framework.
It would look better if you took off
float: left;from.info:) Any way, you're welcome!oh... it must be there from testing and stuff...see thats the problem I play around and then forget to take off the garbage!
...do you own a crocodile?
I wish :) That's a juvenile cayman I caught while on vacation in Surinam, kept him as a pet for a couple of weeks but released him when I had to go back home.