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

Tucker Sowers
Tucker Sowers
4,539 Points
Posted by Tucker Sowers
Tucker Sowers
4,539 Points

Only one column of pictures

I seem to have everything going well except for the pictures - there continues to be only one column no matter how much I mess with it. Help, please!!! Thank you!

HTML:

<!DOCSTYLE html> <html> <head> <meta charset="utf-8"> <title> Sowers Family Pics </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Ubuntu|Shadows+Into+Light|Gloria+Hallelujah|Oswald|Open+Sans|Pacifico|Architects+Daughter' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="wrapper"> <header> <h1>Welcome to the Sowers Family Picture Gallery</h1> <ul id="links"> <nav> <li><a href="index.html">Home</a></li> <li><a href="Lane.html">Click here for pictures of Lane</a></li> <li><a href="Teddy.html">Click here for pictures of Teddy</a></li> </nav> </ul> </header> <section> <ul id="gallery"> <li> <a href="Images/IMG_1.JPG"> <img src="Images/IMG_1.JPG" alt""> <p>CCBC Summer Camp - On the scooter.</p> </a> </li> <li> <a href="Images/IMG_2.JPG"> <img src="Images/IMG_2.JPG" alt""> <p>Fourth of July - Taking a ride on the firetruck.</p> </a> </li> <li> <a href="Images/IMG_3.JPG"> <img src="Images/IMG_3.JPG" alt""> <p>Making silly faces.</p> </a> </li> <li> <a href="Images/IMG_7583.jpg"> <img src="Images/IMG_7583.jpg" alt""> <p>Playing together.</p> </a> </li> <li> <a href="Images/IMG_7571.jpg"> <img src="Images/IMG_7571.jpg" alt""> <p>Lane on the firetruck.</p> </a> </li> <li> <a href="Images/IMG_7576.jpg"> <img src="Images/IMG_7576.jpg" alt""> <p>A big smile from Teddy.</p> </a> </li> </ul> </section> </div> <footer> Do you have pictures that you would like to appear on this webpage? Email me at tucker.sowers@gmail.com <p>©Tucker Sowers 2015</p> </footer> </body> </html>

CSS:

/********************************************* General *********************************************/
a { text-decoration: none; color: white; text-align:center; }

links {

list-style: none; text-align: center; }

img { max-width: 100%; padding: 0; }

p { text-align: center; }

/********************************************* Navagation Colors *********************************************/

nav a { color: #fff; }

nav a:hover { color: #ccc; } /********************************************* Heading *********************************************/

h1 { color:#FF6600; font-family: 'Architects+Daughter', cursive; text-align:center; background-color:#0000FF; font-size: 2em; font-weight: normal; margin: -5px 0 0; }

/********************************************* Colors *********************************************/

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; color: #fff; background-color: #0000FF; font-family: Oswald, sans-serif; font-size: 1.25em; font-weight: normal; }

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

footer { color: #4D4D4D; padding: 0 5%; clear: both; text-align:center; font-family: Gloria+Hallelujah, cursive; }

/********************************************* Gallery - photos *********************************************/

gallery {

margin: 0; padding: 0; list-style:none; float: left; width: 45%; margin: 2.5%; color: #fff; background-color: #0000FF; }

1 Answer

Byron Stine
Byron Stine
4,877 Points
Byron Stine
Byron Stine
4,877 Points

Making two columns can sometimes be difficult with cascading syntax issues. So I recommend to first fix the following syntax issues:

In your HTML file you need to fix:

  1. Open and closing HTML tags. <html></html>.
  2. An open head tag <head>. You only have a closing tag </head>.
  3. An open body tag <body>. You only have a closing body tag </body>.
  4. An open header tag <header>. You only have a closing header tag </header>.
  5. Also, I don't know where your custom CSS styling is. If it's in the normalize.css file. I don't recommend it their. Keep normalize.css as a separate .css file. Create your own .css file such as style.css, add your custom CSS coding there, then add the link just below your normalize link:

<link rel="stylesheet" href="css/style.css">

While these don't have a direct impact on your column issue. It's important to have these issues resolved to prevent complicated cascade issues that may be difficult to correct.

In your CSS file you need to fix:

  1. The selector for wrapper is missing the # symbol. So it should be #wrapper because it's an ID Selector.
  2. You can delete the first declaration of margin: 0 in the #gallery li rule because you have margin: 2.5% later in the in the rule.

*The next steps should clear up your column issue*

  1. The selector for gallery is missing the # symbol. So it should be #gallery because it's an ID Selector.
  2. Then add the child element li to the #gallery selector. This is because we are wanting to float the li elements inside the ul with the gallery ID. So you’re declaration should look like this:

#gallery li { padding: 0; list-style: none; float: left; width: 45%; margin: 2.5%; color: #fff; background-color: #0000FF; }

I tried it out and now there are two columns! You have a good start to nice picture gallery. Good luck with your website!