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 CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Posted by Justin Morgan
Justin Morgan
3,639 Points

Why does using inline-block for the two columns instead not work for me.

Guil stated in his summary that using inline-block for two columns was a fine solution and float should be used more for wrapping content in the flow. I assumed then I should be able to use a different solution of making both primary and secondary divs inline-block in the css and have them line up inline (also making their widths 40% and 60% respectively). However, they are still stacked. Why doesn't inline-block line them up inline? Is that a possible solution for this problem, or is float truly the only way to go?

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Depending on the box sizing model, percentage widths may not take borders and padding into account. And even when they do, margins won't be counted.

So you might need to reduce the sizes a bit to account for that extra space to allow then to fit on one line.

If you need more specific help, show your code; or even better, make a snapshot of your workspace and post the link to it here.