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.

General Discussion

Pictures in HTML don't line up on browser

I have 5 pictures in my code, and all are floated left but there is a big space that i feel like one of the pictures should be in the space. Please help!

Can you please include some code of what you're working on. " big space that i feel like one of the pictures should be in the space" What do you mean feel? Webpages have measurements, so it either fits or it doesn't. Look at the widths of the images. Maybe set a max width to make them fit the way you want.

Here's the HTML

<section> <ul id="gallery">

     <li>
       <a href="img/1.jpg" alt="">
         <img src="img/1.jpg">
         <p>Geoger Best dribbles past defenders to sore.</p>
       </a>
    </li>

     <li>
       <a href="img/2.jpg" alt="">
         <img src="img/2.jpg"  width="400px">
         <p>Teenagers fashion is changing fast.</p>
       </a>
    </li>

     <li>
       <a href="img/tattoo idea 3.jpg" alt="">
         <img src="img/tattoo idea 3.jpg">
         <p>Fijian face mask - pre civil war.</p>
       </a>
     </li>

     <li>
       <a href="img/4.jpg" alt="">
         <img src="img/4.jpg">
         <p>Lost Boys of Sudan walk 100s of miles to safety.</p>
       </a>
     </li>

     <li>
       <a href="img/5.jpg" alt="">
         <img src="img/5.jpg">
         <p>Albert Einstein proves his Theory of Relativity.</p>
       </a>
      </li>

   </ul>

And here is the CSS

/*************************** PAGE: GALLERY ***************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:right; width: 45%; margin: 2.0%; color: #000; }

gallery li a p {

font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; margin:0; padding:0%; font-size:1em; color: black; }

2 Answers

tomaszklekner
tomaszklekner
10,345 Points

Hi William,

I can't see your code, but my first guess is that you might have some margin, padding, or borders that consume some space and it forces your images to float to the next line.

Regards,

Tomek

Here's the HTML

<section> <ul id="gallery">

     <li>
       <a href="img/1.jpg" alt="">
         <img src="img/1.jpg">
         <p>Geoger Best dribbles past defenders to sore.</p>
       </a>
    </li>

     <li>
       <a href="img/2.jpg" alt="">
         <img src="img/2.jpg"  width="400px">
         <p>Teenagers fashion is changing fast.</p>
       </a>
    </li>

     <li>
       <a href="img/tattoo idea 3.jpg" alt="">
         <img src="img/tattoo idea 3.jpg">
         <p>Fijian face mask - pre civil war.</p>
       </a>
     </li>

     <li>
       <a href="img/4.jpg" alt="">
         <img src="img/4.jpg">
         <p>Lost Boys of Sudan walk 100s of miles to safety.</p>
       </a>
     </li>

     <li>
       <a href="img/5.jpg" alt="">
         <img src="img/5.jpg">
         <p>Albert Einstein proves his Theory of Relativity.</p>
       </a>
      </li>

   </ul>

And here is the CSS

/*************************** PAGE: GALLERY ***************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:right; width: 45%; margin: 2.0%; color: #000; }

gallery li a p {

font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; margin:0; padding:0%; font-size:1em; color: black; }

tomaszklekner
tomaszklekner
10,345 Points

Here is a solution that I find more flexible:

<div id="gallery">
    <div class="gallery-item">
       <a href="img/1.jpg" alt="">
         <img src="img/1.jpg">
         <p>Geoger Best dribbles past defenders to sore.</p>
       </a>
    </div>

     <div class="gallery-item">
       <a href="img/2.jpg" alt="">
         <img src="img/2.jpg"  width="400px">
         <p>Teenagers fashion is changing fast.</p>
       </a>
    </div>

     <div class="gallery-item">
       <a href="img/tattoo idea 3.jpg" alt="">
         <img src="img/tattoo idea 3.jpg">
         <p>Fijian face mask - pre civil war.</p>
       </a>
     </div>

     <div class="gallery-item">
       <a href="img/4.jpg" alt="">
         <img src="img/4.jpg">
         <p>Lost Boys of Sudan walk 100s of miles to safety.</p>
       </a>
     </div>

     <div class="gallery-item">
       <a href="img/5.jpg" alt="">
         <img src="img/5.jpg">
         <p>Albert Einstein proves his Theory of Relativity.</p>
       </a>
      </div>

   </div>

and the CSS that you can adjust to your needs

#gallery {
  margin: 0 auto; padding: 0; width: 980px;
}
.gallery-item {
  float:right; width: 45%; margin: 2.0%; color: #000;
}
.gallery-item img {
  width: 100%;
}
.gallery-item p {
 font-weight:200; margin:0; padding:0; font-size:1em; line-height: 1.2em color: #000; text-align: center;
}