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 Techniques Float Layout Why Floats are Used in Web Design

Daniel Granger
PLUS
Daniel Granger
Courses Plus Student 19,857 Points
Posted by Daniel Granger
Daniel Granger
Courses Plus Student 19,857 Points

Why Floats are Used in Web Design?

Why are floats used in web design? In the CSS Layouts course you first layout a site using an inline-block technique (and a bit of display:table). The next chapter goes on to refractor the site to use floats to create the same layout. The first video in this chapter is titled "Why are floats used in web design?" however it doesn't appear to answer this question, instead it discusses the idea of floats, what they do and their popularity in current web design. Finally Guil says floats cause complicated issues although throughout this section we will learn to fix these issues.

So can anyone help answer why floats should be used over other methods.

Thanks

3 Answers

Daniel Granger
PLUS
Daniel Granger
Courses Plus Student 19,857 Points
Daniel Granger
Daniel Granger
Courses Plus Student 19,857 Points

Thanks guys for your replies, I found this great article on the use of floats and inline-blocks for website layout http://www.vanseodesign.com/css/inline-blocks/.

To answer the question of floats or inline-block from the article:

Your choice will ultimately come down to the differences between floats and inline-blocks and which characteristics of each you need

  • Use inline-blocks — when you need more control over the vertical alignment or horizontal positioning of elements.
  • Use floats — when you need other elements to flow around an element, support older versions of IE (6 & 7), or don’t want to deal with the horizontal whitespace issue.
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

In simple terms, Floats, allow you to stack block level objects side by side, instead of one on top of the other.

When you apply a float to an element, it takes that element outside of what's called normal flow. However if you do this, you'll have to account that it takes away it's background which you can compensate for by giving the element a minimum height, :-)

ivomiranda
ivomiranda
30,286 Points
ivomiranda
ivomiranda
30,286 Points

Chek this post with a similar question: https://teamtreehouse.com/forum/layouts

I would recommend that you try to build some simple layouts and check what best suits you. Please take into account that you should look at your example in chrome, opera, firefox, IE and safari.

Also check the Bootstrap and Foundation frameworks. If they use floats it must be for some reason.

I am not a designer so I can't really say if one solution is much better then the other.