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

CSS CSS Basics (2014) Basic Layout Floats

Travis Johnson
Travis Johnson
4,990 Points
Posted by Travis Johnson
Travis Johnson
4,990 Points

Why aren't the .tips and .resorts images "floating" left or right?

I have input the code just as Guill has explained:

'''css

.resorts .tips { width: 46.5%; }

.tips { float: right; }

.resorts { float: left; }

'''

Unfortunately when I save the document, nothing happens. What am I doing wrong?

11 Answers

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

oh I think I see the issue. you are wanting both .resorts and .tips to be 46.5% wide. they way you wrote the selector is incorrect. You need to have a comma between the 2 classes. so..

.resorts, .tips { width: 46.5%; }

.tips { float: right; }

.resorts { float: left; }

since the width is not getting applied correctly to .tips and .resorts you are not seeing the float

Travis Johnson
Travis Johnson
4,990 Points
Travis Johnson
Travis Johnson
4,990 Points

That looks to have fixed it. I believe that I was looking at another post earlier to resolve another issue and removed the comma, which resulted in fixing that problem. Unfortunately it lead to this issue. Thanks very much for the assistance!

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

np! sorry it took so long to get there...I didn't realize what you were trying to do with those classes until I saw you HTML :)

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

So here's what I"m seeing from your first post.

.resorts .tips { width: 46.5%; }

You're calling two classes here but you don't have the comma so this width with never be applied. I'd assume that the objects are then going to block out on the whole page. If you comma separate anything you want to put a style with it should work.

.resorts, .tips { width: 46.5%; }

I don't see any issues with your floats so hopefully this will fix it up for ya.

John Wycoff
John Wycoff
3,914 Points
John Wycoff
John Wycoff
3,914 Points

Hi Bartlomiej, It looks like you are missing the period before the class "tips" .

It should be: 

.resorts, .tips { width: 46.5% }
Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Without seeing your HTML as well it's hard to say. But are you correctly calling your CSS files from your HTML?

Travis Johnson
Travis Johnson
4,990 Points
Travis Johnson
Travis Johnson
4,990 Points

Both div classes of tips and resorts are named properly in the HTML and after correcting a couple of n00b spelling errors with the CSS file, it still doesn't wanna float left or right.

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Can you post your HTML?

Travis Johnson
Travis Johnson
4,990 Points
Travis Johnson
Travis Johnson
4,990 Points

Sure, here's the HTML:

<!DOCTYPE html> <html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> <img class="arrow" src="img/arrow.svg" alt="Down arrow"> </header>

    <div class="primary-content t-border">
        <p class="intro">
            Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
        </p>
        <a class="callout" href="#more">Find out more</a>
  <div class="wildlife">
    <h2>Check out all the Wildlife</h2>
    <p>
      As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
    </p>
  </div><!-- End .wildlife -->

        <a class="callout" href="#wildlife">See the Wildlife</a>
    </div><!-- End .primary-content -->

    <div class="secondary-content t-border"> 
  <div class="resorts">
    <img src="img/resort.jpg" alt="Resort">
    <h3>From Tents to Resorts</h3>
    <p>
      Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
    </p>
    <ul>
      <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
      <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
      <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
    </ul>       
  </div>

  <div class="tips">
    <img src="img/mtn-landscape.jpg" alt="Mountain Landscape">
    <h3>Pack Accordingly</h3>
    <p>
      One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
    </p>
    <ol>
      <li>Bring layers of clothing</li>
      <li>Pack sunscreen</li>
      <li>Carry extra water just in case</li>
      <li>Pack light</li>
    </ol>
  </div>
    </div><!-- End .secondary-content -->

    <footer class="main-footer">
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>

Bartlomiej Zabielski
PLUS
Bartlomiej Zabielski
Courses Plus Student 10,363 Points
Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

Hey I know this an old thread but i had the same problem as OP. I added the , between the classes in the CSS file and it still didn't fix the problem. When i typed the classes in two separate rules (rules right? or is there better name ><) it then fixed it.

.resorts, tips { width: 46.5%; } did not work I then tried

.resorts { width: 46.5%; }

.tips { width 46.5%; }

This finally worked. the comma between the two classes should be the same thing but for some reason only worked when i wrote it out like that (:

molo
molo
8,927 Points
molo
molo
8,927 Points

I'm wondering why the width is 46.5% for each column? Why is it not 50%?

Amanda Gray-Baum
Amanda Gray-Baum
27,390 Points
Amanda Gray-Baum
Amanda Gray-Baum
27,390 Points

At first I could not get anything to happen when I had .resorts, .tips. I changed it to .resorts {} and .tips{} and the .tips code worked but anything I put in the .resorts rule did not work. What am I missing? My css code: .resorts, .tips {width: 49.5%;}

<div class="secondary-content t-border group"> <div class="resorts"> <img src="img/resort.jpg" alt="Resort"> <h3>From Tents to Resorts</h3> <p> Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts: </p> <ul> <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li> <li><a href="#resorts">South Lake Tahoe Resorts</a></li> <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li> </ul>
</div>