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
Hai Huang
12,675 PointsInline-block instead of float
Let's suppose that I have two divs nested in one div and I want to create a left-right two-column layout.
It seems that, instead of adding "float: left;" and "float: right;" properties respectively to the two nested divs, I can also get the same result by adding the "display: inline-block;" property to them.
So is there any difference between the two ways, or let me put it in another way, is one of them better than another and why?
Thank you!
watermelon8
2,015 PointsThis is a very good question and one that has boggled me since I started learning CSS back in 2006 when floats were the go-to factor for layout. The complexity of floats and clearfix's and how it affects the surrounding elements is what has caused me to drop learning CSS altogether many times. I haven't progressed too far in my lessons yet—but hopefully, I'll learn that floats are no longer a part of the modern-day layout development process.
2 Answers
Daniel Landon Jr
14,733 PointsThere is no simple answer to this question. Please refer to this Google Search for several discussions on the differences. I included the search results instead of separate articles as there are a lot of opinions on this matter.
In my opinion, float is a better option, and I will go so far as to state that it is an individual preference. However, as you can see in the search above there are opinions going either way.
Hai Huang
12,675 PointsYeah.. I should have googled first.. Thank you very much!
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 Pointsflexbox is your friend, when you get to that part of the course, you will completely forget about using floats ever again
Joseph Spirito
11,007 PointsJoseph Spirito
11,007 PointsYou will discover more as you go through these courses. I can give you a little insight. Floats are older, and was meant to wrap text around images. So it works, but it will most likely bug with smaller screen sizes. (This will become more clear later) Inline-block is ok. I prefer flexbox (again, will become clear in just a few lessons) Just make sure your columns max-width is less than or equal to 50% of the parent div. This will look ok on typical monitors/resolutions.