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

CSS

Posted by Jamerson Melo
Jamerson Melo
Courses Plus Student 3,236 Points

CSS Layout techniques

Tell me the methods that work for you guys and why you use it: it is easier, faster, better to change later?

Rui Bi
Rui Bi
29,853 Points

I love to use display: inline-block along with box-sizing: border-box. This makes it very easy to create custom grid-based designs. By using inline-block instead of floats, you won't have to worry about clear-fixes or weird cases of inline-elements wrapping around block elements. When compared to table-display, it is a little easier to set custom-widths and is much simpler, in my opinion. Finally, flexbox is a strong alternative, but using inline-blocks gives you a little better browser compatibility at the moment, as well as a bit easier to work with custom widths for elements, and great compatibility with grid systems. By using border-box, you can allocate width to individual elements without worrying about margins and padding. It saves you the trouble of recalculating widths if you change margins and padding and you are working with plain CSS. The two properties in combination form a very powerful, flexible layout tool with good browser compatibility and very good synergy with grid-systems.