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 trialKira Saprykina
4,017 PointsFloating images
After floating images to the left, I've got only 1 picture in the second raw and 2 in the 3rd. Footer stayed centered. What's wrong?
Kristin Anthony
11,099 PointsHowdy Kira, Withouth being able to see the code, I'd suggest looking at the sizes of your images and make sure that, all together, they can fit inside their parent element. For example, if I have 3 images each with a 500px width, they wouldn't all fit in a body (or div) that was only 1000px wide, even if I floated them.
Kira Saprykina
4,017 Points...HTML
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
<p>Beautiful landscapes on canvas.</p>
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
<p>Funny and colorful images.</p>
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
<p>Wall decoration and interior design.</p>
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
<p>Oil and acrilic painting on different surfaces.</p>
</a>
</li>
<li>
<a href="img/5.jpg">
<img src="img/5.jpg" alt="">
<p>Little hand made souvenirs and decor.</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2014 Kira Saprykina.</p>
</footer>
</div>
...CSS
body {
font-family: 'Handlee', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
img {
max-width: 100%;
}
#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: #bdc3c7;
}
3 Answers
Kristin Anthony
11,099 PointsHowdy Kira, Consider this codepen The original images were 350 px wide. With margins and padding, you have to shrink the images so that more than one is on a row in the 940px wide box.
Kira Saprykina
4,017 PointsAll the images are 350px vide, but still second raw fits only 1
Kristin Anthony
11,099 Pointsare all the images the same height? Is it possible that the height of an image could be pushing down a float beneath it? I'm having trouble replicating your problem.
Christian Lawrence
3,941 Pointsfooter
{
clear: both;
float: left;
width: 100%;
text-align: center;
}
I get this when that is added http://imgur.com/KKLFwtd
maybe also try setting the img width: 100%;
Kira Saprykina
4,017 PointsThank you. My footer is ok, everything is aligned as it should be, the problem is with second row of images, only one image stays, so I have a blank space on the 2nd row. Image width is set to 100%.
Kira Saprykina
4,017 PointsI've finally figured it out! I've changed few height value and had to shorten the capture on the first image. Thank you
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsHi Kira,
Could you please post the code you have, both the HTML and CSS.
https://teamtreehouse.com/forum/posting-code-to-the-forum