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
William Gee
Courses Plus Student 452 PointsPictures in HTML don't line up on browser
I have 5 pictures in my code, and all are floated left but there is a big space that i feel like one of the pictures should be in the space. Please help!
William Gee
Courses Plus Student 452 PointsHere's the HTML
<section> <ul id="gallery">
<li>
<a href="img/1.jpg" alt="">
<img src="img/1.jpg">
<p>Geoger Best dribbles past defenders to sore.</p>
</a>
</li>
<li>
<a href="img/2.jpg" alt="">
<img src="img/2.jpg" width="400px">
<p>Teenagers fashion is changing fast.</p>
</a>
</li>
<li>
<a href="img/tattoo idea 3.jpg" alt="">
<img src="img/tattoo idea 3.jpg">
<p>Fijian face mask - pre civil war.</p>
</a>
</li>
<li>
<a href="img/4.jpg" alt="">
<img src="img/4.jpg">
<p>Lost Boys of Sudan walk 100s of miles to safety.</p>
</a>
</li>
<li>
<a href="img/5.jpg" alt="">
<img src="img/5.jpg">
<p>Albert Einstein proves his Theory of Relativity.</p>
</a>
</li>
</ul>
And here is the CSS
/*************************** PAGE: GALLERY ***************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float:right; width: 45%; margin: 2.0%; color: #000; }
gallery li a p {
font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; margin:0; padding:0%; font-size:1em; color: black; }
2 Answers
nnuxiragwh
10,345 PointsHi William,
I can't see your code, but my first guess is that you might have some margin, padding, or borders that consume some space and it forces your images to float to the next line.
Regards,
Tomek
William Gee
Courses Plus Student 452 PointsHere's the HTML
<section> <ul id="gallery">
<li>
<a href="img/1.jpg" alt="">
<img src="img/1.jpg">
<p>Geoger Best dribbles past defenders to sore.</p>
</a>
</li>
<li>
<a href="img/2.jpg" alt="">
<img src="img/2.jpg" width="400px">
<p>Teenagers fashion is changing fast.</p>
</a>
</li>
<li>
<a href="img/tattoo idea 3.jpg" alt="">
<img src="img/tattoo idea 3.jpg">
<p>Fijian face mask - pre civil war.</p>
</a>
</li>
<li>
<a href="img/4.jpg" alt="">
<img src="img/4.jpg">
<p>Lost Boys of Sudan walk 100s of miles to safety.</p>
</a>
</li>
<li>
<a href="img/5.jpg" alt="">
<img src="img/5.jpg">
<p>Albert Einstein proves his Theory of Relativity.</p>
</a>
</li>
</ul>
And here is the CSS
/*************************** PAGE: GALLERY ***************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float:right; width: 45%; margin: 2.0%; color: #000; }
gallery li a p {
font-family: 'Yanone Kaffeesatz', sans-serif; font-weight:200; margin:0; padding:0%; font-size:1em; color: black; }
nnuxiragwh
10,345 PointsHere is a solution that I find more flexible:
<div id="gallery">
<div class="gallery-item">
<a href="img/1.jpg" alt="">
<img src="img/1.jpg">
<p>Geoger Best dribbles past defenders to sore.</p>
</a>
</div>
<div class="gallery-item">
<a href="img/2.jpg" alt="">
<img src="img/2.jpg" width="400px">
<p>Teenagers fashion is changing fast.</p>
</a>
</div>
<div class="gallery-item">
<a href="img/tattoo idea 3.jpg" alt="">
<img src="img/tattoo idea 3.jpg">
<p>Fijian face mask - pre civil war.</p>
</a>
</div>
<div class="gallery-item">
<a href="img/4.jpg" alt="">
<img src="img/4.jpg">
<p>Lost Boys of Sudan walk 100s of miles to safety.</p>
</a>
</div>
<div class="gallery-item">
<a href="img/5.jpg" alt="">
<img src="img/5.jpg">
<p>Albert Einstein proves his Theory of Relativity.</p>
</a>
</div>
</div>
and the CSS that you can adjust to your needs
#gallery {
margin: 0 auto; padding: 0; width: 980px;
}
.gallery-item {
float:right; width: 45%; margin: 2.0%; color: #000;
}
.gallery-item img {
width: 100%;
}
.gallery-item p {
font-weight:200; margin:0; padding:0; font-size:1em; line-height: 1.2em color: #000; text-align: center;
}
Ali M Malik
33,293 PointsAli M Malik
33,293 PointsCan you please include some code of what you're working on. " big space that i feel like one of the pictures should be in the space" What do you mean feel? Webpages have measurements, so it either fits or it doesn't. Look at the widths of the images. Maybe set a max width to make them fit the way you want.