Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Angelica Restrepo
Angelica Restrepo
893 Points

[SOLVED] ,I have a gallery of 11 images and they are not floating correctly.

So I have a gallery of 11 images... the first 6 ones appear correctly one next to the other and on desktop they separate into 3 columns. But the 7th image instead of floating all the way to the left it gets centered under the second column. Then images #8, 9 & 10 float correctly into 3 columns but then again image #11 doesn't float to the left... it stays under the 3rd column.

Here is the HTML coding I have:

 <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/1Mayflower.jpg">
              <img src="img/1Mayflower.jpg" alt="">
              <p>Brand Identity for Mayflower Trolley.</p>
            </a>  
          </li> 

          <li>
            <a href="img/1Cakes.jpg">
              <img src="img/1Cakes.jpg" alt="">
              <p>Brand Identity for Cindy Sue Cakes.</p>
            </a>  
          </li>

          <li>
            <a href="img/1Corareo.jpg">
              <img src="img/1Corareo.jpg" alt="">
              <p>Brand Identity for Corareo.</p>
            </a>  
          </li>

          <li>
            <a href="img/1Gallo.jpg">
              <img src="img/1Gallo.jpg" alt="">
              <p>Brand Identity for El Gallo Bravo Restaurant.</p>
            </a>  
          </li>

          <li>
            <a href="img/1Tea.jpg">
              <img src="img/1Tea.jpg" alt="">
              <p>Packaging Design for Tea Time.</p>
            </a>  
          </li>

          <li>
            <a href="img/1Choco.jpg">
              <img src="img/1Choco.jpg" alt="">
              <p>Packaging Design for Choco Sticks.</p>
            </a>  
          </li>

          <li>
            <a href="img/1So.jpg">
              <img src="img/1So.jpg" alt="">
              <p>Publication and App Design for So Delightful.</p>
            </a>  
          </li>

           <li>
            <a href="img/1Travel.jpg">
              <img src="img/1Travel.jpg" alt="">
              <p>Travel Book Design about Squares in Florence.</p>
            </a>  
          </li>

          <li>
            <a href="img/1mag.jpg">
              <img src="img/1mag.jpg" alt="">
              <p>Publication Design for EScultura Art Magazine.</p>
            </a>  
          </li>

          <li>
            <a href="img/1Techno.jpg">
              <img src="img/1Techno.jpg" alt="">
              <p>Web Design for Technocenter.</p>
            </a>  
          </li>

          <li>
            <a href="img/Logofolio.jpg">
              <img src="img/Logofolio.jpg" alt="">
              <p>Web Design for Technocenter.</p>
            </a>  
          </li>

        </ul>
      </section>

and this is the CSS:

/******************************************
PAGE: PORTFOLIO
*******************************************/

#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.75%;
  color: #bdc3c7;
}

Thanks.

3 Answers

Wayne Priestley
Wayne Priestley
19,567 Points

Hi Angelica,

I think its a problem with your images, specifically the size of them.
As you can see here in my codepen these are all identical sized images, are the images your having problems with larger than the others?

Hope this helps.

Is this not what they are supposed to be doing?

http://codepen.io/anon/pen/YPZMQj

With width 45% and a margin of 2.5% you should be getting correct two column @ 100% width.

Angelica Restrepo
Angelica Restrepo
893 Points

Problem fixed!

I found out what happened. Images where all good in the same size.

I wanted them to be divided in 3 columns but some of the images where centered by themselves.

My css and html where all good, but I forgot I had another css page to make it responsive. I just had to comment out this code:

/** #gallery li:nth-child(4n) { clear: none; } **/

Thanks though ;)