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

michael collier
michael collier
591 Points
Posted by michael collier
michael collier
591 Points

Cant get my Example webpage to float in two colums

<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>
              <li id="gallery">
                <a  href="img/numbers-01.jpg">
                  <img src="IMG/numbers-01.jpg" alt="">
                  <P>Experimentaion with color and texture.</P>
                </a>  
              </li>
              <li>
                <a  href="img/numbers-02.jpg">
                  <img src="IMG/numbers-02.jpg" alt="">
                  <P>Playing with blending modes in photoshop.</P>
                </a>  
              </li>
              <li>
                <a  href="img/numbers-06.jpg">
                  <img src="IMG/numbers-06.jpg" alt="">
                  <P>Trying to create a retro style of glows.</P>
                </a>  
              </li>
              <li>
                <a  href="img/numbers-09.jpg">
                  <img src="IMG/numbers-09.jpg" alt="">
                  <P>Drips created using photoshop brushes.</P>
                </a>  
              </li>
              <li>
                <a  href="img/numbers-12.jpg">
                  <img src="IMG/numbers-12.jpg" alt="">
                  <P>Creating shapes using repetition.</P>
                </a>  
              </li>
            </ul>

this is the main gallery part of my html

/**************************************
FOOOTER
***************************************/

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

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

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

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



/**************************************
COLORS
***************************************/

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

main css part that should allow my pictures to float into two colums
jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Updated your post so it is easier to read.

2 Answers

Pablo Rocha
Pablo Rocha
10,142 Points
Pablo Rocha
Pablo Rocha
10,142 Points

Hi Michael,

Try using "#gallery" instead of just "gallery". Remember, the # symbol signifies that you are referring to a class.

You have:

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

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

Should be:

#gallery {
  margin: 0; 
  padding: 0; 
  list-style:none; 
}

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

BTW, the body definition in the COLORS section looks like it will not work properly. You need to use the proper opening for a comment. Should be "/*" and you just have "/". Same for the closing, you need the asterisk before the forward slash.

You have:

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

Should be:

/*site body*/ 
body { 
  background-color: #fff; 
  color: #999; 
}
Nick Berens
Nick Berens
743 Points
Nick Berens
Nick Berens
743 Points

Block level elements absolutely WILL float.

http://codepen.io/nickberens360/pen/WwNeLw