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
Kelly Molumby
1,802 PointsOne 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
Rich Bagley
25,869 PointsHi Kelly,
Can you post your HTML too please?
Thanks
-Rich
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
7,751 PointsHi 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
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
7,751 PointsHi 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>
Victoria Rast
7,751 PointsVictoria Rast
7,751 PointsRight 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.