nested columns

[shamai]

using percentages i create my layout.

columns within columns are hard to center.
I use box-sizing:border-box;
something similar to this thread:
https://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?

[shamai]

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!

[shamai]

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…

[Paulie_D]

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

[shamai]

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

[Paulie_D]

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.

[shamai]

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

[Paulie_D]

I have modules which are the same width and nest quite nicely. They even have gutters.

I’m happy with it.

[shamai]

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!

[shamai]

hey! it looks right!!
now i just have to figure out what the hell you did.
it looks too simple…. DOH!

[shamai]

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….

[shamai]

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.

[shamai]

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?

[Author]

Posts