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
Gabriel E
8,916 PointsMy website won't float into columns...Please Help!!
Hi, I'm trying to get my website to work like Nick's. You'll see how his looks in the video. Anyway, my entire website just pops into 1 column, not 2, and my facebook and twitter items go up into the corners. Here is my code, I'd appreciate if you would help! Thanks! INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Helping Hands | Handyman</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/Styling.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Helping Hands</h1>
<h2>Handyman</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Odd Jobs</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="workpage">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Collage of my Springtime work.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Collage of my Summertime work.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Collage of my Autumn work.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Collage of my Wintertime work.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Equipment and care I use through all seasons.</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>© 2016 Helping Hands. G.D.</p>
</footer>
</div>
</body>
</html>
AND HERE'S MY CSS FILE, STYLING.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
************/
#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: ODD JOBS
************/
#workpage {
margin: 0;
padding: 0;
list-style: none;
}
#workpage {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/************
COLORS
************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
nav a {
color: #fff;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
THANKS!!!!!!
2 Answers
Unsubscribed User
8,841 PointsVery nice. Can you add the CSS for the footer like the one below.
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
Unsubscribed User
8,841 PointsHi,
I could find that the 'workpage id of the UL Element' is not referenced with '#' in the CSS. If you reference as '#workpage', then the CSS will work. To display as two columns, the 'li' tag also should be referenced along with the webpage like '#webpage li';
Change it and check if it works. There will be few alignment issues which can resolved by modifying the CSS.
Am providing you my CSS for the reference.
#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
}
Gabriel E
8,916 PointsHi Aishu, Thanks for the help, but it still isn't working. Maybe could you tell me exactly what I'm supposed to add? If it's what you just gave me, that didn't do anything, except move my footer up to the second column, which I have no idea why. If you could just clarify, that would be great! Thanks!
Gabriel E
8,916 PointsWait, hold on! I just got the columns to float and work, but then my facebook icon and footer also floated up, so could you tell me how to get that back down? Thanks!
Gabriel E
8,916 PointsGabriel E
8,916 PointsWait, hold on! I just got the columns to float and work, but then my facebook icon and footer also floated up, so could you tell me how to get that back down? Thanks!
Gabriel E
8,916 PointsGabriel E
8,916 PointsAAAh nailed it! Thanks so much! How come that made a difference???
Unsubscribed User
8,841 PointsUnsubscribed User
8,841 PointsThe clear:both property makes that difference :)
No floating elements allowed on either the left or the right side