Fifth image and footer both aligning to the right instead of left?

Question

I finished the video and previewed my work, and for some reason my last image, the fifth one down at the bottom, does not align to the left like it does in the video. Mine is over in the right column instead, and the footer is below all of the images. But in Nick's video, his last image is in the left column and the footer information is just to the right of it. It's not so much that I mind the different look, it's that I don't want complications to come up later in my coding. Did I do something wrong?

To better show what I mean, here's what the video shows the bottom of the page looking like: https://gyazo.com/76b51b46c6d958b71feeb7525015b622

But here's what mine looks like: https://gyazo.com/c09d32c1d76710159a2e06e3ddc66b8e

I don't know if I took the snapshot of my coding correctly... Let me know if I didn't do it right. https://w.trhou.se/djy7adduoo

Answer 1 · 2015-10-13T00:21:55Z

October 13, 2015 12:21am

Hi Vanessa,

By defining a height, the floats wont go outside the boundary of their layout like they are now. What happens here is that one of your floats towards the bottom gets taller than the others from the text description being longer. So, it then takes space away from underneath it and pushed the next float to the right of it.

Floats can be tricky, and they will continue to float until cleared. It can cause a whole lot of confusion at first.

This is where something called a "clearfix" comes in handy.

Add this to your CSS, and take a look at how the paragraph is controlled a bit more.

/*
===============
 Special Stuff
===============
*/

li p {
  overflow: hidden;
  height: 120px;
  font-size: .9em;
  line-height: 1.15em;
  padding: 10px;
  margin: 0;
}

/* Clearfix */

.group:before,
.group:after {
    content: " ";
    display: table;
}

.group:after {
    clear: both;
}

Then, I added a .group class, which is essentially your clearfix (called .group since it's grouping the items within it.)

After adding the CSS above to yours, change...

<section>

...to...

<section class="group">

...and it will help you clear the floats so that the footer is no longer controlled by floating elements.

Take a look at your original page, while re-sizing your browser's width. You'll notice that, sometimes, the heights become equal and everything lines up the way you want it to. After adding the code I've given you above, do the same to see the difference.

Welcome to the Treehouse Community

Looking to learn something new?

Vanessa Elliott

Vanessa Elliott

Fifth image and footer both aligning to the right instead of left?

1 Answer

Steven Ventimiglia

Steven Ventimiglia

Vanessa Elliott

Vanessa Elliott