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 trialEllis Mendoza
2,376 PointsFloat: left; is not working :(
The pictures are not splitting into two columns. :( Please help me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ellis Mendoza | Student</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:900|Open+Sans:400,700,700italic,800,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ellis Mendoza</h1>
<h2>Student</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Photos</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/SJK146SLR.jpg">
<img src="img/SJK146SLR.jpg" alt="" >
<p>SJK146SLR - Solar String Lights</p>
</a>
<a href="img/SLC104A.jpg">
<img src="img/SLC104A.jpg" alt="" ">
<p>SLC104 - Solar Driveway Markers</p>
</a>
<a href="img/SLC108A.jpg">
<img src="img/SLC108A.jpg" alt="">
<p>SLC108A - Solar Mosaic Globe</p>
</a>
<a href="img/SLC192.jpg">
<img src="img/SLC192.jpg" alt="">
<p>SLC192 - Solar USA Flag</p>
</a>
<a href="img/SOT102.jpg" alt="">
<img src="img/SOT102.jpg">
<p>SOT102 - Solar Angel Stake</p>
</a>
<a href="img/SOT162.jpg">
<img src="img/SOT162.jpg" alt="">
<p>SOT162 - Solar Cross Stake</p>
</a>
</li>
</ul>
</section>
<footer>
<p>© 2016 Ellis Mendoza.</p>
</footer>
</div>
</body>
</html>
/*****************************
GENERAL
******************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 600px;
margin: 0 auto;
padding: 0 5%
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*****************************
HEADING
******************************/
#logo {
text-align: center;
margin:0;
}
h1 {
font-family: "Playfair Display", serif;
margin: 0;
padding: 25px 0 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 1em;
margin: -5 0 0;
font-weight: normal;
}
/*****************************
NAVIGATION
******************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
/*****************************
FOOTER
******************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
/*****************************
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
}
/* nav background */
nav {
background: #599a68;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
4 Answers
Richard Nicholls
1,301 PointsIn your unordered list you don't have any individual list items. Add an opening li and a closing /li to each image, li before the <a and </li after the closing</a
Ellis Mendoza
2,376 PointsThank you all for the help! I really appreciate them all! :) RIchard Nicholls found the error. I didn't notice that I didn't put <li> on the other items.
Lee Geertsen
Java Web Development Techdegree Student 16,749 PointsTo be able to use 'float' on an object u need to give it a position of absolute
gallery li {
position: absolute;
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
Don Crowley
Courses Plus Student 3,092 PointsYou should not use position absolute (which is something you should use anyway as a last resort). Try and debug what is happening in your browser console.
FLOATS
You are using a list so do #gallery { display: block; }
then #gallery li { float: left; }
. You may need to add clear: left or clear: both to the next html element on the page after #gallery.
Good luck
MORE READING:
FLOATS 101 on A List Apart (ALA is a really great website) - http://alistapart.com/article/css-floats-101 All about floats on CSS TRICKS (also a really great website) - https://css-tricks.com/all-about-floats/ All the basics www.w3schools.com - See http://www.w3schools.com/cssref/pr_class_float.asp about floats and use the Try it yourself button to edit live