using percentages i create my layout.
columns within columns are hard to center.
I use box-sizing:border-box;
something similar to this thread:
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…
there its ugly but I think its understandable…
so how would one make nested equal sized columns?
ok so if | = padding:
| 3/4 | 1/4|
in the 3/4 col we have:
that first | you see above is the padding of the outer div + this 1/4 padding and its no longer aligned.
||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
| 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.
< -- add left padding here instead
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…
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…
check out the last set of cols
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:
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
they are not the same width!
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!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".