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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by S L
S L
1,930 Points

My images aren't floating side by side even though I believe I wrote the code correctly. Any ideas?

My html code

        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation 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>blah blah blah.</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>another picture.</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>more stuff.</p>
            </a>
          </li>
       </ul>

My CSS code

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sapir,

I've edited your code so it appears correct in your post.

6 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Sapir,

Can you try changing:

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

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

to:

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

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

It just looks to be missing the # to reference the id in the html file.

Hope that helps.

-Rich

S L
S L
1,930 Points

Hi Rich,

I actually have the #'s in my code, I don't know why it didn't show up when I copied it here.

Do you have any other ideas what might be wrong with it?

Rich Bagley
Rich Bagley
25,869 Points

Hi Sapir,

Hmm, that's very odd as what you've written looks correct. Can you try taking out everything except the float please to make sure nothing is overriding it?

e.g.

#gallery li {float: left;}

Does this make any difference?

-Rich

S L
S L
1,930 Points

I just tried that, but it didn't change anything. The images themselves are also not resizing to the smaller size.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sapir,

Try adding display: inline-block; to your css for #gallery li

S L
S L
1,930 Points

Hi Wayne,

I tried your suggestion, but unfortunately it didn't work.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Sapir,

Just noticed you mentioned that your images aren't resizing. Do you have the following code above what you posted as this may be what's making your floats not appear to work?

img {max-width: 100%;}

Thanks -Rich

S L
S L
1,930 Points

Yes, I have that written right above my "heading" section in CSS

Rich Bagley
Rich Bagley
25,869 Points

Hi Sapir,

I'm sorry I can't be much help on this one. All of your CSS look correct and appear to match the video.

The only other thing I can think of is a conflicting style below or an unclosed semicolon above these styles which may cause it to not working but everything you have posted looks fine.

-Rich

S L
S L
1,930 Points

Hi Rich,

Thank you for trying. I'm going to contact support to see if they can spot something we missed.

Rich Bagley
Rich Bagley
25,869 Points

No problem, hope you get it sorted :)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sapir,

I noticed you have a width of 45% for your li that will give each li a width of 45% and not a total width of 45% for all your li
If you change the % to a smaller number you should get the result your looking for.

S L
S L
1,930 Points

Hi Wayne,

I just tried that, but that didn't seem to work either.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Sapir,

This is what i get when i use your exact code:

alt text

Do you get anything like this?

(obviously i don't have the images but you get my meaning)

S L
S L
1,930 Points

That's really strange. On mine the images don't change at all from what they looked like before I added this code. They are still too large and only in one column.

Did you add anything to it?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Nope Sapir,

Apart from the fact i don't actually have your images to link to that is your EXACT code i copied from your first post.
What are you using to preview your site, workspaces?

S L
S L
1,930 Points

Yes, I'm using workspaces

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Can you double check your link to the css file in your html

S L
S L
1,930 Points

Yeah I have this:

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

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

in my head (without the spaces between the code and the brackets of coarse) with the link to my fonts in between.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Jen B was having the same problem but its fixed for her now, i don't see the errors she had in her code in your code (a few missing colons) and your code works for me, but I'm not viewing it in workspaces.
That could be the issue as your link path is fine.

https://teamtreehouse.com/forum/images-are-not-floating-please-help-debug

S L
S L
1,930 Points

Alright, thanks for your help. I'm going to try viewing it not with workspaces and see if it works.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Let us know how it goes Sapir,

Good luck :)

Jennelle Barajas
Jennelle Barajas
5,317 Points
Jennelle Barajas
Jennelle Barajas
5,317 Points

Sapir,

Please keep us update as you contact Treehouse. I'm having the same problem!

Thanks