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 Basics (2014) Basic Layout Floats

Hai Huang
Hai Huang
12,675 Points

Inline-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!

Joseph Spirito
Joseph Spirito
11,007 Points

You 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.

This 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

There 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
Hai Huang
12,675 Points

Yeah.. I should have googled first.. Thank you very much!