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

Posted by Joseph Torres
Joseph Torres
6,282 Points

When to use display and float properties.

Maybe Im getting this confused but is there a rule of thumb of when to use float and display properties?

Nijesh Nj
Nijesh Nj
18,232 Points

Float is used to move something to our desired side or place. For example, if you creating a nav bar you will have to use float

.nav {
float: left;
}

or right to help us to create the best navbar without much work.
You can find more at ccs-tricks

While display will help use to change the behavior of the selected item.

div {
  display: inline;   
  display: inline-block; 
  display: block;       
  display: run-in;  
  display: none; 
}

These are different types of display properties. Inline is the default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn't break the flow of the text. This is what inline is also about. Block: A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can. You can find more about display at css-tricks.

Christopher Parke
Christopher Parke
21,978 Points

float separates the element from the natural flow of the page and goes to the side you select (right , left). There is no float center.

display will determine how the element 'displays' itself to the document. display: block; - default setting for most elements. Any elements after it will be on a new line. This element also understands width, height and margins. display: inline - this will make the element take up only as much width and height as it needs to survive and sit next to the preceding element -- on the same line. This display method does NOT understand width, height and margins. display: inline-block - This element will only take up as much width and height as it needs to survive, but it also understands width and height and margins so you can augment it.

Generally you are going to user them independently and cooperatively.