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 Creating a Horizontal Navigation with Floats

maya sophie
maya sophie
5,754 Points
Posted by maya sophie
maya sophie
5,754 Points

Using float over inline-block

In the video around the third minute, Guil is using:

.main-nav li { float: left; } I did it using:

.main-nav li { display: inline-block; }

The only difference noticed was more space between blocks when using inline-block. Is Guil's method better ?

2 Answers

Dehn Hunsworth
Dehn Hunsworth
7,189 Points
Dehn Hunsworth
Dehn Hunsworth
7,189 Points

Not knowing what other css was there...those two lines might have had a similar result but are very different properties. When you set an item to "display: inline-block" it will allow other css properties to apply where "display: inline" blocks many of them. probably why you saw the extra padding between them.

Michael Shields
Michael Shields
12,650 Points
Michael Shields
Michael Shields
12,650 Points

Hi Maya,

That is a main difference when using floats - you won't have to worry about the html whitespace that can appear if you were using the alternative and changing the display value to something like inline-block. Eliminating that whitespace will require additional styling declarations in your css which might seem unnecessary when compared to using float values to build the layout.