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 Foundations The Box Model Floats

Antoine Boillot
Antoine Boillot
10,466 Points
Posted by Antoine Boillot
Antoine Boillot
10,466 Points

CSS : float vs [padding, margin, border...] ?

Hi All,

Going through the CSS foundation path, I just discovered the float function.

Although I understand how it works, I'm not sure to fully understand when to use it.

Looks to me that the same positioning could be done via classic, block margin, padding and border definition.

When is it better to use one or the other ?

Thanks a lot,

3 Answers

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi. float are used to float blocks or text anything I guess.
When you build a website e.g. left bar content right bar. They will come under the html , step by setp .

If the width id 1200px , you left bar would be ok 300px content ok 500px and right bar is 400px. They will com elike this

WEBSITE LAYOUT

Left bar
Content
Right bar

if you float them e.g. left it would look like this

Left bar | Content | Right bar

even with the text, if the navigatin is like

Home
About us
Contact us

And you float them

it would look ike Home | About us | Contact us .

When you float , you move an element to the side you want . With floats you can also push other elements too .

I hope you understand if you need more explanation . I can try and show you as well as to find an useful article as long as this is what you get for your answer .

Kelvin Zhao
Kelvin Zhao
10,418 Points
Kelvin Zhao
Kelvin Zhao
10,418 Points

Doesn't inline block do the same thing?

Aaron Watson
Aaron Watson
2,551 Points
Aaron Watson
Aaron Watson
2,551 Points

As with anything there is always more than 1 way to build a website and some people like to use the float method. At least that the way I'm looking at things... but i'm not an expert

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hmmm, from my point of view, in modern days, you have to use float as there is not other way to move blocks. As long as you want to have your site look professional. Tables aren't used in layout same as frames or i don't remember the name of it .

But I'm not an expert too. Thats what i think . I don't remember Guil talk about any other methods to do it .I might be wrong and thee my be other way too but umm .

Aaron Watson
Aaron Watson
2,551 Points
Aaron Watson
Aaron Watson
2,551 Points

Well at this blog post says you can use the new flexbox, padding/margins or float. I agree I think tables are a bad idea now.

http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Great you understood it :smiley: