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
Ron Smith
552 PointsCANNOT GET MY PG TO FLOAT INTO 2 COLUMNS
/*********************
PAGE: PORTFOLIO
*********************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/*******
Where is my mistake?
********/
Jason Anello
Courses Plus Student 94,610 PointsHi Ron,
Can you post a snapshot link of your workspaces?
Carlos Principe
6,961 Pointsdisplay:inline;
Ron Smith
552 Points/*********************
Jason - here's the entire CSS code. I cannot find my mistake. The img aren't in two columns.
GENERAL
-Beginning with a forward slash asterick then ending with an asterisk forward slash allows placing comments within code
*********************/
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: 10px 0;
margin: 20px 0 0;
}
/*********************
FOOTER
*********************/
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;
}
/* red header */
header {
background: #9a1a3b;
border-color: #19297a;
}
/* nav background on mobile devices */
nav {
background: #19297a;
}
/* logo text */
h1, h2 {
color: #777;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color */
nav a.selected, nav a:hover {
color: #32673f;
}
9 Answers
Jason Anello
Courses Plus Student 94,610 PointsHey Ron,
Nothing is standing out at the moment in your css.
My only guess is that you didn't set the "gallery" id in your html and so those styles aren't being applied.
<ul id="gallery">
If that checks out then post a snapshot of your workspace if you get a chance.
Jason Anello
Courses Plus Student 94,610 PointsSee my answer here. You have a typo on your gallery id name.
Your existing html:
<ul id="gallary">
None of your gallery styles are being applied because of that.
Report back if there's still additional trouble.
Ron Smith
552 PointsJason, yes the html has <ul id="gallary"> Below is a snapshot of my html, which has <html> <head> </head> <body></body> </html>, it just doesn't seem to appear. CTRL C & CTRL C.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ron Smith | Broker</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ron Smith</h1>
<h2>Broker</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="gallary">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color 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/reflection.jpg">
<img src="img/reflection.jpg" alt="">
<p>Reflection</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Happy Day!</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Let's just see what's happening.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/profile.php?id=1423147740"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Ron Smith.</p>
</footer>
</div>
</body>
</html>
Jason Anello
Courses Plus Student 94,610 PointsYou still have 'gallery' spelled wrong in your html. Try fixing that 1st.
For future reference, this thread will show you how to post code properly in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum
morgan segura
Courses Plus Student 6,934 PointsTry using a CSS reset, I believe you styles are being overridden somewhere along the way, perhaps by the browser. Place the following code at the top of your css file:
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com /html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/ HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
Michelle Hart
7,468 PointsMine also will not float::
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%
margin: 2.5%;
background-color: #f5f5f5;
color:#bdc3c7;
}
Jason Anello
Courses Plus Student 94,610 PointsHi Michelle,
You're missing the semicolon after width: 45%
This would cause the browser to ignore the width property and the margin property that follows.
Michelle Hart
7,468 PointsThank you! Unfortunately, that did not change anything. =/
Jason Anello
Courses Plus Student 94,610 PointsDid you save your file and refresh the preview?
I can't see anything else wrong with the css that you have posted.
You can check the link above that I posted for workspace snapshots to see how to do that.
Do you have a rule that gives your images a max width of 100%?
Something like:
img {
max-width: 100%;
}
Without this the images will display at native size and overflow their container.
Michelle Hart
7,468 PointsI figured out the float issue, the id was in the incorrect place in html. However, I still have the bullets appearing even with the "list-style: none;" code. Any ideas?
Jason Anello
Courses Plus Student 94,610 PointsMichelle,
Posting a snapshot of your workspace would be the easiest way to help you. You can check the link I posted above if you're not sure how to do it.
Michelle Hart
7,468 PointsHi Jason, Here is the snap, the file you want is titled "theflair.css" Thanks.
Jason Anello
Courses Plus Student 94,610 PointsHey Michelle,
Thanks for posting the snapshot.
The problem is actually in the comments above your gallery styles.
/*****************
PAGE: PORTFOLIO
/* the % of width, regardless of page size, each img will only take up that % ofthe parent element */
/* # is an id selctor*/
******************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
Workspaces doesn't show the problem through syntax highlighting but you can look at it here in the forums and you'll see the problem. Notice that last line of asterisks and forward slash is not highlighted in green. Meaning, it's not part of the comment and causes an error with the next css rule. Hence, those styles are ignored and you still have the bullets.
You can't have nested comments which is what caused this. There ends up being a mismatch of the opening /* and closing */
Whenever you have a comment block like that you can put whatever you want in there except don't put additional opening and closing comment characters.
The fixed comment block:
/*****************
PAGE: PORTFOLIO
the % of width, regardless of page size, each img will only take up that % ofthe parent element
# is an id selctor
******************/
Ron Smith
552 PointsSORRY - entire code didn't copy. Later I'll try researching the link you previously suggested.
morgan segura
Courses Plus Student 6,934 PointsAlthough you have "#gallery" padding and margin set to zero, the "li" elements may still have padding and margin by browser default. This is just a shot in the dark because we can't see your HTML, however you could try something like "#gallery, #gallery li { margin: 0; padding: 0;}" just in case. Please display upir HTML as well so we can see what may be missing. Good Luck.
Ron Smith
552 PointsMorgan, Still haven't found 2 column floating error. Only 1 column. Below is my entire HTML. Thanks, Ron
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ron Smith | Broker</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ron Smith</h1>
<h2>Broker</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="gallary">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color 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>What everver.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Happy Day!</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Let's just see what's happening.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/profile.php?id=1423147740"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Ron Smith.</p>
</footer>
</div>
</body>
</html>
morgan segura
Courses Plus Student 6,934 PointsHere's what I get after the reset: http://l.d.pr/1h7b4/5VQ6nIXZ
morgan segura
Courses Plus Student 6,934 PointsDo you have
<html>
<head> </head>
<body></body>
</html>
seth hinkle
1,090 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <div> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</h2> </a> <nav> <ul id="gallery"> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contacts</a></li> </ul> </nav> </header> <section id="wrapper"> <ul> <li> <a href="image02/dead tree.jpg"> <img src="image02/dead tree.jpg" alt=""> <p>Tattoo Design Of A Dead Oak Tree.</p> </a> </li> <li> <a href="image02/Sad Donald Duck.jpg"> <img src="image02/Sad Donald Duck.jpg" alt=""> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rose Portrait.jpg"> <img src="image02/Rose Portrait.jpg" alt=""> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Clown Moon.jpg"> <img src="image02/Clown Moon.jpg" alt=""> <p>Tattoo of a Festive Clown Moon, done by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Wikked Iron Cross.jpg"> <img src="image02/Wikked Iron Cross.jpg" alt=""> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>© Seth Mosby Hinkle.</p> </footer> </body> </div> </html>
My images are not side by side and I am not sure why, did I miss something?
Jason Anello
Courses Plus Student 94,610 PointsHi Seth,
You accidentally put the gallery id with the ul for the navigation rather than the ul that contains all the images.
seth hinkle
1,090 PointsHey jason, i changed the ul, but now my footer logos are in the second column. Should there be an id="gallery" in the </ul>?
Ron Smith
552 PointsThink so... Also the background of sentences below my imgs aren't gray.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ron Smith | Broker</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ron Smith</h1>
<h2>Broker</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="gallary">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color 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/reflection.jpg">
<img src="img/reflection.jpg" alt="">
<p>Reflection</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Happy Day!</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Let's just see what's happening.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/profile.php?id=1423147740"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Ron Smith.</p>
</footer>
</div>
</body>
</html>
Jason Anello
Courses Plus Student 94,610 PointsHave you checked my answer yet?
Ron Smith
552 PointsThe entire code didn't copy into comment above. Yes the html has: <html> <head> </head> <body></body> </html>
Ron Smith
552 PointsFixed typo. Img now in 2 col. Thanks.
Jason Anello
Courses Plus Student 94,610 PointsGlad you got it working. Ignore my last comment. I hadn't seen that you fixed it already.
Carlton Whittaker
1,995 PointsCarlton Whittaker
1,995 Pointsyour gallery is an id selector so you should have # before gallery.