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

Angelica Restrepo
Angelica Restrepo
893 Points
Posted by 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,579 Points
Wayne Priestley
Wayne Priestley
19,579 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.

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

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
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 ;)