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

Felix Yakubov
Felix Yakubov
17,475 Points
Posted by Felix Yakubov
Felix Yakubov
17,475 Points

Why float and not inline?

In this video Guil shows how to use floats to create two columns. A notion came to me - why not inline the to divs instead of using floats? Floats take the elements outside of normal page flow, display:inline not.

Any thoughts =)?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi John,

There is an answer section a little further down the page. Can you re-post your comment as an answer?

3 Answers

John Burkhard
John Burkhard
16,314 Points
John Burkhard
John Burkhard
16,314 Points

Mainly:

Document Flow - Floats are removed from the normal document flow allowing other elements to flow around them. Inline-blocks stay in the document flow.

Whitespace - Inline-blocks pick up html whitespace. If you have several inline-block elements each on a new line in your html they’ll display with a horizontal space between them. Floated elements will sit adjacent to each other, regardless of the html whitespace between them.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Felix Yakubov,

Mainly because I wanted to give students a quick overview of floats. I cover the float vs inline-block method in the CSS Layout Techniques course.

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Thanks for the answer! Yes Ive seen the course, maybe I should repeat it =)

ndizhkifqv
.a{fill-rule:evenodd;}techdegree
ndizhkifqv
Front End Web Development Techdegree Student 1,525 Points

I was going to ask the same question. Thanks

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

I was just wondering the same thing.

I always try and figure out what the solution is before the give-away and I tried using inline-block for .resorts and float for the tips. It worked quite wonderfully and the only reason I could assume why Guil was using a double float was specifically for the purpose of teaching the clearfix.

I will have to go back and review the layout techniques course because I watched that a while ago and have plum forgot a lot of it.

Cheers,

Huck - :sunglasses:

Ivan Franzone
Ivan Franzone
7,328 Points
Ivan Franzone
Ivan Franzone
7,328 Points

When it´s about "building" layouts, I think we should always use "float & clearfix". Except when we are giving styles to smaller elements like a "list" in order to create an horizontal menu.