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

JavaScript Object-Oriented JavaScript (2015) Practice Project Project Overview

Posted by john larson
john larson
16,594 Points

what is the point of using "float: none" 

.centered, .grid {
  float: none;
  margin-left: auto;
  margin-right: auto; }

I was looking over the css and this caught my eye. These elements seem to be centered in a way I'm not familiar with, I don't know if that's related to the float property and what's going on here.

3 Answers

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

John, they are centered because of the auto values for the margins, not the float. Here's what w3schools has to say about the float value of none: The element is not floated, and will be displayed just where it occurs in the text. This is default. So if you have something that's floating and you need to return it to its default position you can use float: none;

john larson
john larson
16,594 Points

ok, so "margin:inherit auto; would do the same thing? and the display : none; would seem to be a "just in case" thing.

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

There are a number of good articles on centering, including this one from w3 -- https://www.w3.org/Style/Examples/007/center.en.html, but the key is using auto with margin, and setting the width to something less than the full width:

div.center {
     margin: 0 auto;
     width: 200px; 
}
john larson
john larson
16,594 Points

wow, lots of good answers, thank you.

john larson
john larson
16,594 Points

I guess the part that looked out of character was separating left-margin and right-margin and adding auto to each one instead of 

div.center {
     margin: 0 auto;
     width: 200px; 
}
eck
eck
43,038 Points

Using margin-left and margin-right was probably done because margin: 0 auto can have the side effect of taking away margin from the top and bottom of whatever you are trying to center. It can be useful to be more specific with the properties you choose to modify.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Thanks Eric. So then margin: inherit auto; will do the same thing as margin-left auto; and margin-right; auto; ?

eck
eck
43,038 Points

It actually would not do the same thing. They way inherit works is it takes values from parent elements.

.container {
  margin: 5px;
}

.container p {
  margin: inherit;     // in this example the <p> will inherit .container's margin
}

Hope that makes sense :)

Side note: margin: inherit auto is not a valid value, but margin: inherit is.

john larson
john larson
16,594 Points

Thanks Eric, that clears it up for me.