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
Matthew Schad
9,381 PointsHow can I float the posts on this Tumblr blog I'm designing to the right? I'm trying, with no luck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel=stylesheet href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900' rel='stylesheet' type='text/css'>
<link rel=stylesheet href="css/main.css">
<title>GlobeShotters</title>
</head>
<body>
<header>
<div id=logo>
<a href="index.html">
<h1>GlobeShotters</h1>
<h2>Curated Photography from around the World</h2>
</a>
</div>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="featuredartists.html">Featured Artists</a></li>
<li><a href="submit.html">Submit</a></li>
</ul>
</nav>
</header>
<div id=wrapper>
<section>
<section><ol id="posts">
{block:Posts}{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}{Body}
</li>
{/block:Text}{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}{block:Panorama}
<li class="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Panorama}{block:Photoset}
<li class="post photoset">
{Photoset-500}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}{block:Video}
<li class="post video">
{Video-500}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}{block:Audio}
<li class="post audio">
{AudioEmbed}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}{/block:Posts}
</ol>
</section>
</section>
</div>
<style>
</section>
</div>
#posts img {
max-width:40%;
box-shadow:15px 15px 20px 20px #fff;
max-height:1024px;
}
li {
list-style: none;
}
.caption {
max-width:20%;
font-size:.5em;
}
.caption h2 {
font-size: .5em;
}
.tumblr_blog {
font-size:.5em;
}
</ol>
</style>
<footer>
</footer>
</body>
</html>
/////****CSS*****///////
#header {
padding: 5%;
}
a {
text-decoration: none;
color:#760000;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align:center;
margin:5px 0 10px 0;
padding-top: 10px;
background-color:#d8d8d8;
}
/******NAV & HEADER*******/
header {
background:#d8d8d8;
max-width:100%;
box-sizing:border-box;
}
nav {
background-color:#760000;
text-align:center;
margin:0;
padding:.1px;
box-sizing:border-box;
}
nav a {
color:#d8d8d8;
padding:15px 25px;
}
nav a:hover {
color:#bdbdbd;
}
h1 {
font-family:'playfair display', serif;
font-size: 4em;
font-weight: 900;
margin: auto;
color:#000;
text-align:center;
}
h2 {
font-family:'playfair display', serif;
font-weight:2em;
font-weight:400;
margin: 5px 0;
text-align:center;
}
nav ul {
list-style:none;
}
nav li {
display:inline-block;
font-family:'Playfair Display', serif;
font-weight:200;
font-size:1.5em;
text-align:center;
float:right;
clear:both;
}
header {
padding-top:5px;
}
/*MEDIA QUERIES*/
@media only screen {
and (min-device-width : 375px) // or 213.4375em
and (max-device-width : 667px) // or 41.6875em
and (width : 375px) // or 23.4375em
and (height : 559px) // or 34.9375em
and (orientation : portrait)
and (color : 8)
and (device-aspect-ratio : 375/667)
and (aspect-ratio : 375/559)
and (device-pixel-ratio : 2)
and (-webkit-min-device-pixel-ratio : 2)
}
Here's what's happening: www.GlobeShotters.tumblr.com
Also, if anyone has any tips on where I can improve, anything is appreciated.
2 Answers
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 PointsHi Mathew,
If you want to float an element you use the float property and make sure you clear your floated element with the clear property or use clearfix. Have you watched the CSS Basic Course and the Basic Layout Stage? If you, haven't they are the best course videos to watch to help you.
Hope that helps.
Lauri Neuding
13,525 PointsFirst of all, you are calling out h1 and h2 to be text-align: center. Remove them. Text-align is used on containers to apply to to the text within them and you have already called it out on #logo. As far as floating goes, I tried #posts {float: right;} it works on the sample you've posted here, but w/o images it is hard to see if it is working as you want. The site itself has no ol text so I can't see how that is working.