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

Posted by Erick Roque
Erick Roque
6,418 Points

Something I'm not understanding in the Floats video.

Ok guys, this one confused me.

In the Floats video, Gil discusses how to make text flow around the right side of an image using "float: left". At about 4:40, he discusses how to align the paragraph that is now flowing to the right of the image so that the text doesn't wrap under the image but instead is flushed left and aligned under the heading. He accomplishes this by also floating the paragraph element left.

So now he has the image and the paragraph both floated left. I'm not understanding how floating the paragraph left aligns the text under the h2 element above it. What "float:left" does, according to the video, is cause other elements to flow around the right side of the floated element. I'm just not making the connection of why you would use it here to get that specific effect.

If anyone could clear that up it would be much appreciated.

2 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

This will be a rather long reply but just continue reading and I think I may be able to explain this too you.

When you use a css float you push an element to the far left or right of its current container, allowing other elements to flow around it, including text.

When you float two elements in the same direction (i.e left) they will both sit next to each other as long as their is room available for them to do so.

One of the reasons that the heading is not affected by the float, and doesn't wrap is because elements before a floated element are not affected by the float at all, only elements after the floated one.

So adhering to the rules I showed you above when the image and paragraph were floated to the left, they sat next to each other, and underneath the heading.

Now their are many reasons why a float is more useful here are two:

  1. Floats are easier to control for this work, if you had to use positioning you would have to factor in margins, paddings, width and height, in order to prevent elements from overlapping others, or getting cut out of the container.
  2. Floats require less work for this type of example

Finally here are some links to get you further into understanding floats w3schools CSS Floats CSS Tricks All About Floats

Erick Roque
Erick Roque
6,418 Points
Erick Roque
Erick Roque
6,418 Points

Dane,

Thank you for your response. Your explanation makes sense except for one thing. You said "One of the reasons that the heading is not affected by the float, and doesn't wrap is because elements before a floated element are not affected by the float at all, only elements after the floated one." However, in the example we are asked to follow in the video, here is the HTML:

<body>
    <div>
        <img src="flag.png">
        <h4>Build a Simple Website</h4>
        <p>Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project. The Smells Like Bakin' cupcake company needs their website to work on tablets and phones. We will modify the code of their pre-existing website so that it is flexible and fits beautifully into a wide variety of screen resolutions and devices.</p>
    </div>
</body>

The relevant CSS:

h4 {
    margin: 0 0 12px 0;
    color: #33383D;
    font-size: 1.8em;
}

p {
    margin: 0;
    font-size: 1.5em;
    width: 500px;
    float: left;
}

img {
    float: left;
    margin: 0 25px;
}

So as you can see, the image is the first element listed. Since the img is being floated, the H4 heading should be affected by it. The paragraph element is the other element that is floated.

Anyway I will be checking out those links.

Thanks!

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Also remember the second rule, floated elements will mostly just sit next to eachother, becuase they are somewhat taken out of the normal flow (where the h4 is) and placed on the far left, as such, they will float next to eachother, and push the h4 element above them to fill up the space.

Good job understanding it though, and catching that.