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 Polish the Navigation and Footer

Kira Saprykina
Kira Saprykina
4,017 Points
Posted by Kira Saprykina
Kira Saprykina
4,017 Points

Floating images

After floating images to the left, I've got only 1 picture in the second raw and 2 in the 3rd. Footer stayed centered. What's wrong?

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Kira,

Could you please post the code you have, both the HTML and CSS.

https://teamtreehouse.com/forum/posting-code-to-the-forum

Kristin Anthony
Kristin Anthony
11,099 Points
Kristin Anthony
Kristin Anthony
11,099 Points

Howdy Kira, Withouth being able to see the code, I'd suggest looking at the sizes of your images and make sure that, all together, they can fit inside their parent element. For example, if I have 3 images each with a 500px width, they wouldn't all fit in a body (or div) that was only 1000px wide, even if I floated them.

Kira Saprykina
Kira Saprykina
4,017 Points
Kira Saprykina
Kira Saprykina
4,017 Points 
...HTML
<div id="wrapper">
<section>
        <ul id="gallery">
          <li>
            <a href="img/1.jpg">
              <img src="img/1.jpg" alt="">
              <p>Beautiful landscapes on canvas.</p>
            </a>
          </li>
          <li>
            <a href="img/2.jpg">
              <img src="img/2.jpg" alt="">
              <p>Funny and colorful images.</p>
            </a>
          </li>
          <li>
            <a href="img/3.jpg">
              <img src="img/3.jpg" alt="">
              <p>Wall decoration and interior design.</p>
            </a>
          </li>
          <li>
            <a href="img/4.jpg">
              <img src="img/4.jpg" alt="">
              <p>Oil and acrilic painting on different surfaces.</p>
            </a>
          </li>
          <li>
            <a href="img/5.jpg">
              <img src="img/5.jpg" alt="">
              <p>Little hand made souvenirs and decor.</p>
            </a>
          </li>
        </ul>
      </section>
<footer>
        <p>&copy; 2014 Kira Saprykina.</p>
      </footer> 
    </div>


...CSS
body {
  font-family: 'Handlee', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float:left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

3 Answers

Kristin Anthony
Kristin Anthony
11,099 Points
Kristin Anthony
Kristin Anthony
11,099 Points

Howdy Kira, Consider this codepen The original images were 350 px wide. With margins and padding, you have to shrink the images so that more than one is on a row in the 940px wide box.

Kira Saprykina
Kira Saprykina
4,017 Points
Kira Saprykina
Kira Saprykina
4,017 Points

All the images are 350px vide, but still second raw fits only 1

Kristin Anthony
Kristin Anthony
11,099 Points
Kristin Anthony
Kristin Anthony
11,099 Points

are all the images the same height? Is it possible that the height of an image could be pushing down a float beneath it? I'm having trouble replicating your problem.

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points 
footer
{
clear: both;
float: left;
width: 100%;
text-align: center;
}

I get this when that is added http://imgur.com/KKLFwtd

maybe also try setting the img width: 100%;

Kira Saprykina
Kira Saprykina
4,017 Points
Kira Saprykina
Kira Saprykina
4,017 Points

Thank you. My footer is ok, everything is aligned as it should be, the problem is with second row of images, only one image stays, so I have a blank space on the 2nd row. Image width is set to 100%.

Kira Saprykina
Kira Saprykina
4,017 Points
Kira Saprykina
Kira Saprykina
4,017 Points

I've finally figured it out! I've changed few height value and had to shorten the capture on the first image. Thank you