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

victor sagrista lopez
victor sagrista lopez
1,437 Points

Floating images on CSS, it won't float them from the left in two columns

Hi everybody, I’m having an issue with the floating property. I am a beginner and recently started learning about CSS. I have done exactly what Nick Pettit explained on his video. I used to use my own images, but then I changed to see if it was an issue of different photo size or something… Anyways, it should put the pictures in two columns and it doesn’t. I’d appreciate some help. Below is the code, thank you!

/* This is the HTML part, below is the CSS */ <ul id="gallery"> <li > <a href="img/numbers.jpg.jpg"> <img src="img/numbers.jpg.jpg" alt="" id="numeros"> <p>Experimentation with color and size</p> </a>

      <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt=""> 
          <p>Number 2</p>
       </a>
      <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt=""> 
          <p>Number 6</p>
       </a>
      <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt=""> 
          <p>Number 12</p>
       </a>
       </li>
    </ul>

/* CSS code*/

/****************************************************************************************** PAGE PORTFOLIO ******************************************************************************************/

gallery {

margin:0; padding:0; list-style:none;

}

gallery li {

float:left; margin:2.5%; width:25%; background-color:#f5f5f5; color:#bdc3c7; }

/****************************************************************************************** COLORS ******************************************************************************************/

11 Answers

Ok, you have image { max-width:100%; } You want to change image to img

You also have nav { align-content:center; padding: 10px 0; margin:20px 0 0; }

You want text-align: center;

See where you're at after making those 2 changes.

victor sagrista lopez
victor sagrista lopez
1,437 Points

Jason, thanks so much! That was the bug....such a beginner. Really appreciated, thanks.

You're welcome. Glad you got it sorted out.

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

You aren't selecting the Gallery.

Add # before gallery.

#gallery {

margin:0; 
padding:0; 
list-style:none;

}

#gallery li {

float:left; 
margin:2.5%; 
width:25%; 
background-color:#f5f5f5; 
color:#bdc3c7; }
victor sagrista lopez
victor sagrista lopez
1,437 Points

Sorry, it showed it like that. I do have the #gallery in the original document

Ricky Catron
Ricky Catron
13,023 Points

Try adding Display:inline-block; to gallery li.

Vishal Bhan
Vishal Bhan
7,974 Points

You have to wrap all your links in li tags, since you're floating the list items, like so:

<ul>
  <li><a>...</a></li>
  <li><a>...</a></li>
  <li><a>...</a></li>
</ul>
victor sagrista lopez
victor sagrista lopez
1,437 Points

I did them all, one by one, still the same...

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

This worked for me

<section<
<ul id="gallery">
  <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt=""> 
          <p>Number 2</p>
       </a>
  </li>
  <li>
      <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt=""> 
          <p>Number 6</p>
       </a>
    </li>
  <li>
      <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt=""> 
          <p>Number 12</p>
       </a>
  </li>
    <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt=""> 
          <p>Number 12</p>
       </a>
       </li>
    </ul>
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}


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

I added another image into your HTML for fun. Ignore that. But I just wanted to show you that you aren't selecting the Gallery.

victor sagrista lopez
victor sagrista lopez
1,437 Points

I have put all of those <li> individually, made sure I included the #gallery...not sure what else to do... <section > <ul id="gallery"> <li > <a href="img/numbers.jpg.jpg"> <img src="img/numbers.jpg.jpg" alt="" id="numeros"> <p>Experimentation with color and size</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Number 2</p> </a> </li> <li>
<a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Number 6</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Number 12</p> </a> </li> </ul>

</section>
victor sagrista lopez
victor sagrista lopez
1,437 Points

This is the CSS

gallery {

margin:0; padding:0; list-style:none;

}

gallery li

{

float:left; margin:2.5%; width:25%; background-color:#f5f5f5; color:#bdc3c7; }

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points

Have you tried the code I listed for you?

I realize I have a typo

<section> instead of <section<

Vishal Bhan
Vishal Bhan
7,974 Points

After adding the li tags around the anchor tags, did you add "display: inline-block" on the li items? Think that should work.

victor sagrista lopez
victor sagrista lopez
1,437 Points

YEah I did that, same result, not as the video at all:

/

gallery {

margin:0; padding:0; list-style:none;

}

gallery li

{ display:inline-block; float:left; margin:2.5%; width:45%; background-color:#f5f5f5; color:#bdc3c7; }

The images are floated left, you don't want to use display: inline-block here.

Hi Victor,

As mentioned already, you want to make sure that each link is wrapped in a list item.

Also, you have set your list item width to 25% instead of 45%. So if you were seeing 3 columns before then that should fix if for you.

If you're seeing a single column and the images are still large then check further up in the "General" section of your css file and make sure you have:

img {
  max-width: 100%;
}

Without that your images will overflow their containers.

victor sagrista lopez
victor sagrista lopez
1,437 Points

Nothing seems to work, I do have that on the general. I triend 25% and it put them on three columns but the images looked like rectangles facing up. Thanks for the patience!

I think you'll have to better describe the layout that you're seeing. If it's not 2 columns then what do you see? how many columns?

First, make sure that it's 45% so that you're getting 2 per row. Don't use display: inline-block

25% will get you 3 columns which you don't want yet at this point. You will make it 3 columns later on and you'll set the width to something a little more than 25%.

If you're using the original 5 images then please describe where each one is positioned and how many columns you're seeing.

What do you mean by "the images looked like rectangles facing up"?

victor sagrista lopez
victor sagrista lopez
1,437 Points

Now I see them in two columns, (we've made some progress!! :). They way they look is really tight. There are two on the left that are "cut" by the ones on the right, which show up if you scroll to the right

Sorry for the inconviniences, here's the link, I'm not sure if you can see it, but in case:

http://web-78ss5g8csp.treehouse-app.com/

You mean that you have a horizontal scrollbar?

My only suggestion at this point is to post all of your main.css file. You can leave off the color section at the bottom.

victor sagrista lopez
victor sagrista lopez
1,437 Points

Ok, I'll post it all here:

/****************************************************************************************** GENERAL ******************************************************************************************/

body { font-family: 'Marck Script', sans-serif; }

wrapper /*wrapper id is contained in the div, which is an encapsulation of items

WRAPPER ES UN ID, SE PONE EN UN HREF O DIV*/

{max-width:940px; margin:0 auto; padding:0 5%;

}

a { text-decoration:none; }

image { max-width:100%; }

/****************************************************************************************** HEADING ******************************************************************************************/

/* text position for the header */

logo {text-align:center; /* #LOGO EQUIVALE A HEADER, ES UN ID="LOGO, EL ID SE PONE DENTRO DE UN HREF O UN DIV*/

margin:0; }

/****************************************************************************************** NAVIGATION ******************************************************************************************/

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

/****************************************************************************************** FOOTER ******************************************************************************************/

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

/****************************************************************************************** PAGE PORTFOLIO ******************************************************************************************/

gallery {

margin:0; padding:0; list-style:none;

}

gallery li

{

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