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.

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

Kelly Molumby
Kelly Molumby
1,802 Points

One column instead of two

I am only getting one column instead of two. I have read all the related question and triple checked my spelling and syntax. I'm wondering if its because of the images I used. I resized them to 1024x768.

Below is my CSS

/*************************
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
**************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

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

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}


/*************************
Navigation
**************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  padding: 15px 10px;
}

/*************************
Footer
**************************/

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

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*************************
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: #bdcec7;
}
/*************************
Colors
**************************/


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

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


/** nav background on mobile **/
nav {
  background-color: #599a68;
}

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

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


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

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

Please help!

Thank you

Victoria Rast
Victoria Rast
7,751 Points

Right now I can't see anything wrong with your CSS code. It's a good idea you re-sized your images, as float won't work if it thinks the images are too big. I am assuming you have the id=gallery in your HTML code? Meaning your <ul> opening tag would look like this: <ul id=gallery> Make sure your ul tag is closed. Look all through your HTML for that page and look for 'broken' (unclosed) tags. Make sure all the <li> tags are inside the <ul> tags and are properly nested. Watch for broken <li> tags.

Hi Kelly,

Can you post your HTML too please?

Thanks

-Rich

Kelly Molumby
Kelly Molumby
1,802 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title>Kelly Molumby | Photographer</title> </head> <body> <header> <a href="index.html" id="logo"> <h1>Kelly Molumby</h1> <h2>Photographer</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/boats.jpg"> <img src="img/boats.jpg" alt=""> <p>Boats in Dingle</p> </a> <a href="img/columbine.jpg"> <img src="img/columbine.jpg" alt=""> <p>Colorado Columbine</p> </a> <a href="img/dafodil.jpg"> <img src="img/dafodil.jpg" alt=""> <p>Daffodil in Wiesbaden</p> </a> <a href="img/riley.jpg"> <img src="img/riley.jpg" alt=""> <p>Riy Guy</p> </a> <a href="img/gargoyle.jpg"> <img src="img/gargoyle.jpg" alt=""> <p>Colorado Columbine</p> </a> <a href="img/mountain.jpg"> <img src="img/mountain.jpeg" alt=""> <p>Swiss Peak</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/kelly.marie.351"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon" ></a> <p>© 2015 Kelly Molumby.</p> </footer> </div> </body> </html>

3 Answers

Victoria Rast
Victoria Rast
7,751 Points

Hi Kelly, in your <ul> list each image needs to be a separate <li> tag. For example:

<ul id="gallery"> <li> <a href="images/flower.JPG"> <img src="images/flower.JPG" alt=" " />

        </a>
      </li>
      <li>
        <a href="images/rock.JPG">
          <img src="images/rock.JPG" alt=" "/> 
        </a>
      </li>

</ul>

Kelly Molumby
Kelly Molumby
1,802 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title>Kelly Molumby | Photographer</title> </head> <body> <header> <a href="index.html" id="logo"> <h1>Kelly Molumby</h1> <h2>Photographer</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/boats.jpg"> <img src="img/boats.jpg" alt=""> <p>Boats in Dingle</p> </a> <a href="img/columbine.jpg"> <img src="img/columbine.jpg" alt=""> <p>Colorado Columbine</p> </a> <a href="img/dafodil.jpg"> <img src="img/dafodil.jpg" alt=""> <p>Daffodil in Wiesbaden</p> </a> <a href="img/riley.jpg"> <img src="img/riley.jpg" alt=""> <p>Riy Guy</p> </a> <a href="img/gargoyle.jpg"> <img src="img/gargoyle.jpg" alt=""> <p>Colorado Columbine</p> </a> <a href="img/mountain.jpg"> <img src="img/mountain.jpeg" alt=""> <p>Swiss Peak</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/kelly.marie.351"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon" ></a> <p>© 2015 Kelly Molumby.</p> </footer> </div> </body> </html>

Victoria Rast
Victoria Rast
7,751 Points

Hi Kelly, the images in your list need to be each in a separate list tag. Your code needs to look like this:

<meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title>Kelly Molumby | Photographer</title>

<header> <a href="index.html" id="logo"> <h1>Kelly Molumby</h1> <h2>Photographer</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/boats.jpg"> <img src="img/boats.jpg" alt=""> <p>Boats in Dingle</p> </a> </li> <li> <a href="img/columbine.jpg"> <img src="img/columbine.jpg" alt=""> <p>Colorado Columbine</p> </a> </li> <li> <a href="img/dafodil.jpg"> <img src="img/dafodil.jpg" alt=""> <p>Daffodil in Wiesbaden</p> </a> </li> <li> <a href="img/riley.jpg"> <img src="img/riley.jpg" alt=""> <p>Riy Guy</p> </a> </li> <li> <a href="img/gargoyle.jpg"> <img src="img/gargoyle.jpg" alt=""> <p>Colorado Columbine</p> </a> </li> <li> <a href="img/mountain.jpg"> <img src="img/mountain.jpeg" alt=""> <p>Swiss Peak</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/kelly.marie.351"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon" ></a> <p>© 2015 Kelly Molumby.</p> </footer> </div>