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
Marston Gould
PHP Development Techdegree Student 17,314 PointsCSS Layout Grid Math and Alignment
I've been trying to build some other layouts using the grid technique shown in the CSS Layout Techniques class. I have a question about how the math is calculated. I'm trying to create a 3-box layout over two rows with the first row having one container and the second row having two. I'd like the left position of the first box in the second row to align with the left margin of the top container and the right position of the second box in the second row to align with the right margin of the top container.
Using the grid calc's shown in the lesson with 65px columns and 20px gutter, I note that
grid-6: width 49%, so grid-6 + grid-6 = 98% whereas grid-12 = 100% - a 2% difference likewise grid-1 @ 6.5% and grid-11 @ 91.5% also = 98% and a grid-4 + grid-4 + grid-4 = 32% + 32% + 32% = 96%
The net result of this is that my boxes are not aligning by the difference between 100% and the total width% of the boxes.
Isn't there something inherently wrong here?
How do I get my boxes to align appropriately.
2 Answers
Marston Gould
PHP Development Techdegree Student 17,314 PointsOkay, I think I figured it out on my own after some experimentation.
Essentially I had to target both content row containers with single class that had common margins, padding. Seems simple enough, but it took me a few hours to realize. I also was able to realize that if I target each specific row with its own flexbox, each internal container expanded to the height of the largest creating a nice design. You can come see what I've done at http://goo.gl/iwIHUs
Jake Cooper
Courses Plus Student 56,854 PointsIts a bit of a long shot but I had similar issue when starting out with responsive design using Bootstrap and found that the only thing which solved it for me was coding it "their way" which for me meant adding wrapper divs to each row because despite the div elements which had their respective sizes set their position wasn't being calculated as two independent rows so much as one row that had wrapped into two rows.
try adding something like this between them :
(HTML)<div class="grid-12"></div> ()
()<div style="clear:both"></.div>()
()<div class="grid-6"></div><div class="grid-6"></div>()
if that has any affect then wrapper divs will definately help solve the problem completely.
I think the extra percent or two is just to allow for the extra borders being considered in the width when more columns are in the rows width equation. Alternatively you could try a combination of CSS properties like 1) display:inline block;and float:left / right; OR 2) display:block; box-sizing: content-box || border-box.
Hope this helps, if not paste your code