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
victor sagrista lopez
1,437 PointsFloating 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
Jason Anello
Courses Plus Student 94,610 PointsOk, 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.
Thomas Seelbinder
Courses Plus Student 1,223 PointsYou 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
1,437 PointsSorry, it showed it like that. I do have the #gallery in the original document
Ricky Catron
13,023 PointsTry adding Display:inline-block; to gallery li.
victor sagrista lopez
1,437 PointsI did, it didn't work :(
Vishal Bhan
7,974 PointsYou 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
1,437 PointsI did them all, one by one, still the same...
Thomas Seelbinder
Courses Plus Student 1,223 PointsThis 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
1,437 PointsI 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
1,437 PointsThis 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
Courses Plus Student 1,223 PointsHave you tried the code I listed for you?
I realize I have a typo
<section> instead of <section<
Vishal Bhan
7,974 PointsAfter 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
1,437 PointsYEah 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; }
Jason Anello
Courses Plus Student 94,610 PointsThe images are floated left, you don't want to use display: inline-block here.
Jason Anello
Courses Plus Student 94,610 PointsHi 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
1,437 PointsNothing 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!
Jason Anello
Courses Plus Student 94,610 PointsI 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
1,437 PointsNow 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:
Jason Anello
Courses Plus Student 94,610 PointsYou 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
1,437 PointsOk, 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; }
victor sagrista lopez
1,437 Pointsvictor sagrista lopez
1,437 PointsJason, thanks so much! That was the bug....such a beginner. Really appreciated, thanks.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome. Glad you got it sorted out.