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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Oğulcan Girginc
Oğulcan Girginc
24,848 Points
Posted by Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Why float: left?

When I tried with float: right, I got the same outcome. So the questions is; what is the real difference (or is there) between floating left or right?

3 Answers

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

we really need to see some code to see why you're element isn't changing when you float left or right. In answer to your question, the real difference is that one floats your element left and the other floats it right. Float left moves an element to the left until it's outer left edge touches the edge of another floated object or it's containing element. Float right moves an element to the right until it's outer right edge touches the edge of another floated object or it's containing element.
If floating an element is not floating left or right then perhaps the width of the element is already touching it's container or the elements next to it, therefore it has no room to move.

A great article on floats: http://css-tricks.com/all-about-floats/

Oğulcan Girginc
Oğulcan Girginc
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Thanks for that great site! I didn't know it before and seems very useful!

Oğulcan Girginc
Oğulcan Girginc
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

That link you shared provided the answer! Thanks! :)

Holger Liesegang
Holger Liesegang
50,595 Points
Holger Liesegang
Holger Liesegang
50,595 Points

Hi ogirginc !

Can you please elaborate on this a bit more and paste your code.

Oğulcan Girginc
Oğulcan Girginc
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Sorry for not being clear. I know it isn't suppose to change, because of the width and margin I am using. I'm just curious and wanted to know why it is called 'right' or 'left' in cases like below:

#gallery li {
  float: left; 
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
René Aoki
René Aoki
281 Points

Why width 45%?

I am working on another proyect that images are small, and made a scuare background, but when I change screen size, the boxes are aligned to the left. so there is a big gap on the right..

I have:

<ul id="principal"> <li>
<p><img border="0" src="http://exposientetebien.com/wp-content/uploads/2015/02/proveedores.png"></p> <p>300 Proveedores</p> </li>
. . . . . </ul>

you can see the demo here:

http://exposientetebien.com/

whe resizing the browser, the pink scares are aligned to the left! any advise?

Oğulcan Girginc
Oğulcan Girginc
24,848 Points
Oğulcan Girginc
Oğulcan Girginc
24,848 Points

Width is set to 45%, because when the margin is set to 2.5%, gallery will be aligned centrally. So, it will look like this;

Space (2.5%) + Gallery Item (45%) + Space (2.5%) + Space (2.5%) + Gallery Item + Space (2.5%)

If I am not mistaken, you just need to recalculate margin and width of those pink scares.