Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Can somebody simplify this to me please?

Hi,

Im a bit confused in the middle of it.

Begin with a parent container that is larger than the combined width and borders or your 3 boxes. For this demo, container width (900px) minus combined width of boxes (250px x 3 = 750px) and left & right borders (4px x 6 = 24) = total margins between boxes (126px). Total margins (126) divided by # of margins needed (2) = 63px for margins between boxes. If we've done our math correctly, content inside the #Container division will fit like a glove. If our math is off, we may notice a few problems.

Could somebody simplify it to me ? please

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Im a but lost in the middle of it and my box is not aligned on centre. Oh an I'm doing it with 1200px od container and 300px of box.

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Aurelian,

Let's break this down.

  1. Make a container that has a width of 900px
  2. next make 3 boxes that have widths of 250px, total width is 750px between all 3
  3. now add left and right borders to all 3 boxes with a width of 4px, now all 3 boxes should have a width of 774px
  4. between the first and second box a margin of 63px should be used resulting in 3 boxes that equal the original 900px width

See the below link as a reference.

http://codepen.io/ChrisUpjohn/pen/jEPdrM

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

HI,

Thank you for your response.

I dont understand , why should there be 63px?

As i made it on mine 1200px container and 300px of box, i can't get the exactly right figure of the middle box to stay in the middle .

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Thank you for the reference.

But I'm not sure about &:nth-child(1n+2), could you explain it to me a little better if you have time?

And the way you did, i guess its clean and looks nice, so i could use this as making mine 3 boxes ? like to code it?

Chris Shaw
Chris Shaw
26,676 Points

The 63px margin is the total remaining space to the trailing edge of the container, so if you have a 1200px container with boxes that total 300px each minus the borders you would have 300px remaining, add 4px borders to each and you now have 276px which divided by two results in a 138px margin between the first and second boxes.

See the below example.

http://codepen.io/ChrisUpjohn/pen/ByNMLN

But I'm not sure about &:nth-child(1n+2), could you explain it to me a little better if you have time?

If you haven't learned about the :nth-child pseudo selector I would recommend you go and read a simple overview article by Chris Coyier along with using a live testing tool.

http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/examples/nth-child-tester/

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

aaa I get it now . Thank you very much !

I forget about what is 1n+2 , i didn't use it often .

I don't want to sound annoying but, to make it responsive , should i just swap the px with % ?

Thank you for the reference and css tricks . I really appreciate it .

Chris Shaw
Chris Shaw
26,676 Points

Changing the pixel values to percentages will create a fluid design which simply squishes everything together whereas as responsive designs shift elements around rather than them just getting smaller, for instance on tablets you could align the first two boxes side-by-side and have the last one expand the full width of the screen then on mobile have them stacked vertically.

It's really up to you how you want to move the boxes around and the possibilities are simply numbered by creativity.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

So pixels are all right i believe, with little of help of media queries for tablets and mobile and everything should look all right , right?

What I'm doing now is I'm trying to keep my HTML code clean and ill try to make it as best as i can so i can start working with it in real life and I'm learning CSS but, i want to make more of a clean design with it and responsive on tablets and mobile.

As i come from absolute, fixed and that stuff background ( old websites : p) . As i did it couple months ago before i joined treehouse and now I'm just taking is serious and i have to learn it . Since i know the stuff around, now I'm trying to make it clean and understand how things works . You know what happens when you use absolute position , it get messy (in my case where i did put them everywhere).

So i hope its not too hard to take the new logic or CSS in a month time or so .

Thank you for the ideas and the code and everything :) Thank you!