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 trialDevon Tackels
1,221 PointsFloating Images and alignment on web page
I am having trouble aligning my images properly within my gallery when using the float: left; alignment of my list items.
For some reason, it will not align all of my images next to each other. Instead, it will align the top row correctly with two of the gallery images next to each other, then on the third image it will not work properly leaving an empty space. Then on images 4-5 it will pick back up and align them properly next to each other. Does anyone know why this would be?
8 Answers
Diane Houghton
5,773 PointsCan you post your code?
Devon Tackels
1,221 PointsThanks for the help Diane! Below is my CSS
/*********************** GENERAL ************************/ body { font-family: 'open sans', sans-serif; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a { text-decoration: none; }
img { max-width: 100%; }
/*********************** HEADING ************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center;
margin: 0;
}
h1 { font-family: 'changa one', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/*********************** NAVIGATION ************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 50px 10px; }
/*********************** FOOTER ************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; } /*********************** PAGE: PORTFOLIO ************************/
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;
}
/*********************** COLORS ************************/
/* site body */
body { background-color: #fff; color: #999; }
/* green header / header { background: #6ab47b; border-color: #599a68; } / logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav background on mobile */ nav { background: #599a68; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Diane Houghton
5,773 PointsThis looks fine - I can't see any issues with it (I'm assuming you have the # before wrapper, gallery, etc). The problem may be with your html code. Can you post that as well?
Devon Tackels
1,221 PointsOh thanks for checking it out, Diane. I really appreciate it. I was starting to go mad looking for errors. hahah. Below you can find my HTML code. I believe I had done everything right, but I may have made a mistake somewhere in there. I am still new to this stuff. Thanks!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Devon Tackels | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Devon Tackels</h1> <h2>Photographer & Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/1.jpg"></a> <img src="img/1.jpg" alt=""> <p>Brooke's Wedding Day</p> </li> <li> <a href="img/2.jpg"></a> <img src="img/2.jpg" alt=""> <p>Sam's Headshot</p> </li> <li> <a href="img/3.jpg"></a> <img src="img/3.jpg" alt=""> <p>The Sun sets over Oakland, CA. </p> </li> <li> <a href="img/beach.jpg"></a> <img src="img/beach.jpg" alt=""> <p>A sunny day in Outerbanks, NC.</p> </li> <li> <a href="img/6.jpg"></a> <img src="img/6.jpg" alt=""> <p>The Brooklyn Bridge</p> </li> <li> <a href="img/7.jpg"></a> <img src="img/7.jpg" alt=""> <p>Washington, DC Metro </p> </li> </ul> </section> <footer> <a href="http://twitter.com/thetackels"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/dtackels"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2014 Devon Tackels.</p> </footer> </div> </body> </html>
Diane Houghton
5,773 Pointsyou didn't include the code for the gallery images, so I'm not sure what's going on. I'm guessing that the third image has a mistake in the code, and that's why it's not showing up. Check it against the other image html.
Devon Tackels
1,221 PointsI guess I cannot post the code in entirety here, there must be a character limit to the answer text box.
After reviewing the html I can't see any difference in the code of the gallery images. It just seems to float some images, and not all.
Diane Houghton
5,773 Pointsyou have to wrap the code in 3 backticks: ``` on the line before and the line after the code.
Brian Yu
2,121 PointsHi Diane! I'm having the same problem; image number six does not float properly. Can you take a look at my index.html?
<!DOCTYPE html> <!-- ALWAYS FIRST, NO SPACES BEFORE -->
<html>
<head> <!-- Contains META information -->
<meta charset="utf-8">
<title>Brian Yu | Programmer and Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Roboto:400,400italic,700,700italic,900' rel='stylesheet' type='text/css'> <!-- PUT THE FONTS BELOW NORMALIZE, ABOVE CUSTOM CSS-->
<link rel="stylesheet" href="css/main.css">
<link rel="icon" href="img/mail.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Brian Yu</h1>
<h2>Programmer and Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<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>Photoshop practicing.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Creating an 80s vibe.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>More Photoshop experimentation.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Repetition of shapes.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Brian Yu</p>
</footer>
</div>
</body>
</html>