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 Style the Portfolio

Posted by Jennelle Barajas
Jennelle Barajas
5,317 Points

Images are not floating. Please help debug!

Here is my HTML:

<section>

        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation</p>
              </a>
          </li>
           <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Fun fun fun</p>
             </a>
          </li>
           <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Howdy hey</p>
             </a>
          </li>
           <li>
            <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Hello World! Super cool wizards know what up.</p>
              </a>
          </li>
           <li>
            <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>The quick brown fox jumps over the lazy dog.</p>
            </a>
          </li>
        </ul>

        </section>

and here is my CSS:

img {
  max-width: 100%;
}

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

My images are not floating. They are staying as they originally were.

I've been scanning my HTML and CSS for any syntax errors but I can't find any. Thank you in advance for your help!

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jennelle,

A few missed colons in your css is your problem.

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

}

Apart from that your code works fine for me when i paste it into code pen.
You and Sapir seem to be having the same problem, what are you using to view your site, workspace?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Your also missing a colon in your #gallery padding

Joni Whitworth
Joni Whitworth
431 Points
Joni Whitworth
Joni Whitworth
431 Points

Wayne! You have eagle eyes!

I'm using Chrome.

Looks like it was just an oversight.

Thank you for your help! It worked!