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
alida strydom
Courses Plus Student 1,712 PointsBuilding layouts like these
Taking a look at this theme and it's source code, I'm trying to figure out how to achieve layouts like the ones on these two page. One thing I'm able to comprehend is that there is surely a lot of vertical centering taking place with js.
http://www.undsgn.com/uncode/pages/about-wide/ and http://www.undsgn.com/uncode/pages/services-creative/
I suppose I'm mostly wondering about the equal heights of sections and elements.
What part does setting the row/s to "display: table-table" and it's direct descendants to "display:table-cell" play in the layout -- I am aware that these two css rules force non-table elements to behave like table-elements
1 Answer
Jacob Mishkin
23,118 PointsI'm not sure 100% of what you are asking, but are the "rows" divs? and is there tabular data nested inside that row? If so and the row is a div, not a class of a grid of something, the reason they use display: table-cell is that instead of using a table element they use a div to make table data accessible with mobile. tables are not conducive to mobile layouts so they use a div then display it as a table-cell.
here is a good read on using tables for responsive:
As for the height on elements, I think they want to make the height on elements even so they use equal height. If there is something I missed please let me know.