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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

German Correa
German Correa
496 Points
Posted by German Correa
German Correa
496 Points

My images are not floating to 2nd column

I went through similar questions in the community page on this very topic/issue, then tried all the solutions and still won't work. Please look at my both html and css code and help. Thanks!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Austin -n- Davis | TroubleTeam </title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <header>
        <a href="index.html" id="logo">
        <h1> Austin -n- Davis </h1>
        <h2> TheBros </h2>
            </a>
        <nav>
            <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
           </ul>
        </nav>
    </header>
  <div id="wrapper">
    <section>
   <ul id="gallery">
      <li>
          <a href="img/IMG_0621.jpg">
          <img src="img/IMG_0621.jpg" alt="" width="555" height="600">
          <p> They were 2 and 3 yrs old here</p>
          </a>
     </li>

          <li>
          <a href="img/IMG_1197.JPG">
    <img src="img/IMG_1197.JPG" alt="" width="555" height="600">
      <p> They were 2 and 3 yrs old here</p>
          </a>
     </li>
          <li>
          <a href="img/_MG_2789.JPG">
    <img src="img/_MG_2789.JPG" alt="" width="555" height="600">
      <p> They slowly became a team </p>
          </a>
     </li>
          <li>
          <a href="img/_MG_2885.JPG">
    <img src="img/_MG_2885.JPG" alt="" width="555" height="600">
      <p> They played but they fought also</p>
          </a>
     </li>
          <li>
          <a href="img/numbers-01.jpg">
    <img src="img/numbers-01.jpg" alt="">
      <p> They are 2 and 3 yrs old here</p>
          </a>
     </li>
        </ul>
    </section>
    <footer>
       <a href="http://twitter.com/gcorrea1978"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/germancorrea"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 German Correa.</p>
    </footer>
    </div>
</body>

</html>

/.CSS CODE STARTS HERE./ /*********************** GENERAL ***********************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/*********************** HEADING ***********************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height:0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /*********************** NAVIGATION ***********************/ nav { text-align: center; padding: 10 px 0; margin: 20px 0 0; }

/*********************** FOOTER ***********************/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc }

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

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 }

/*********************** COLORS **********************/ / site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

5 Answers

Jordan Hudson
Jordan Hudson
2,977 Points
Jordan Hudson
Jordan Hudson
2,977 Points

Hey!

I'm unsure if it is the way you have reproduced your code to show us here but in the CSS none of your selectors are using the appropriate syntax.

When referencing to an id from HTML use # in CSS before the id name.

When referencing to a class from HTML use . in CSS before the class name.

Hope this helped. If not let us know and I'll look deeper into your code.

Thanks!

Jordan.

German Correa
German Correa
496 Points
German Correa
German Correa
496 Points

Thank you for all your responses, greatly appreciated! It turns out I already had the hash (#) in the code but did not paste on the forum somehow. But I figured it out and it works now!!

I forgot to put the ; semicolon at the end of width, and margin.

Jordan Hudson
Jordan Hudson
2,977 Points
Jordan Hudson
Jordan Hudson
2,977 Points

Ah! I've just noticed that now, in the gallery li selector. Nice work! Glad you've figured it out.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Hi German,

I didn't read all your code, but at least your gallery rules needs a hashtag "#gallery".

Angel Naranjo
Angel Naranjo
30 Points
Angel Naranjo
Angel Naranjo
30 Points

Yea gallery needs # and also logo and wrapper on your css.

#wrapper
#logo
#gallery
German Correa
German Correa
496 Points
German Correa
German Correa
496 Points

Thank you Jordan!! :)