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 trialARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 PointsFLOAT PROPERTY ISN'T WORKING
The float property in my code isn't working, I am using chrome on Ubuntu, could that be an issue? I am attaching the required files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arnab Sharma | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Arnab Sharma</h1>
<h2>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">
<a href="img/numbers-01.jpg">
<l1><img src="img/numbers-01.jpg" alt=""></l1>
<p>Experimentation with color and texture</p>
</a>
<a href="img/numbers-02.jpg">
<l1><img src="img/numbers-02.jpg" alt=""></l1>
<p>Playing with blending modes in photoshop</p>
</a>
<a href="img/numbers-06.jpg">
<l1><img src="img/numbers-06.jpg" alt=""></l1>
<p>Trying to create an 80's style of glows</p>
</a>
<a href="img/numbers-09.jpg">
<l1><img src="img/numbers-09.jpg" alt=""></l1>
<p>Drips created using Photoshop brushes</p>
</a>
<a href="img/numbers-12.jpg">
<l1><img src="img/numbers-12.jpg" alt=""></l1>
<p>Creating shapes using repetition</p>
</a>
</ul>
</section>
<footer>
<a href="http://www.twitter.com/ArnabSharma4892"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://www.facebook.com/arnab.sharma1"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2017 Arnab Sharma</p>
</footer>
</div>
</body>
</html>
/*************************
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
*************************/
#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;
}
/*************************
FOOTER
*************************/
footer {
font-size: 0.75em;
text-align: center;
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;
}
/*************************
COLOR
*************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
background-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover{
color: #32673f;
}
1 Answer
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi there,
First of all, I reformatted your code using forum markdown so we could read it better. Have look at the markdown cheatsheet in the link below to see how to use Markdown.
I was confused by this too when I ran the code through a JS Fiddle. Then I noticed you've accidently set your list item elements li
using l1
instead of the former. Change that in your HTML for all your list items and then the floats should start to work. :)
ARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 PointsThanks a lot!! Stupid mistake.
ARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 PointsARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 PointsSorted it out, i had enclosed the list elements in a wrong way!!!