Grow your CSS skills. Land your dream job.

nested columns

  • # February 28, 2013 at 1:18 pm

    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?

    # February 28, 2013 at 2:25 pm

    +1 for the laugh :)

    But what is the problem exactly? They look as much centered as unnested columns to me.

    # February 28, 2013 at 4:03 pm

    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!

    # February 28, 2013 at 4:17 pm

    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.

    < -- remove left padding here

    < -- add left padding here instead

    And remember to use closing tags when needed, a lot of your closing tags are actually opening tags.

    # February 28, 2013 at 4:34 pm

    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…

    # February 28, 2013 at 4:38 pm

    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

    # February 28, 2013 at 4:44 pm

    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.

    # February 28, 2013 at 4:49 pm

    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

    # February 28, 2013 at 4:54 pm

    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.

    # February 28, 2013 at 4:56 pm

    Hate to tell you this but you aren’t really getting closer with relative position, this is as far as you get :P

    # February 28, 2013 at 5:30 pm

    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

    # February 28, 2013 at 6:23 pm

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

    I’m happy with it.

    # February 28, 2013 at 6:47 pm

    they are not the same width!
    look here
    http://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!

    # February 28, 2013 at 8:14 pm

    I’ll take that nothing: http://codepen.io/CrocoDillon/pen/ykCfA

    # February 28, 2013 at 9:04 pm

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

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".