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

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Posted by Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Code won't work for this challenge.

Here is my code.

.group :after { content: ""; display: table; clear: both; }

.content-lodging { float: right; } .content-traveling { float:left; }

.secondary-content { clear: both; }

I did overflow instead of clear, but it did not accept that either.

style.css 
/* Complete the challenge by writing CSS below */



/* Clearfix ---------------------------------- */

.group :after {
  content: "";
  display: table;
  clear: both;
}

.content-lodging {
float: right;
}
.content-traveling {
  float:left;
}

.secondary-content {
  clear: both;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
        <div class="secondary-content t-border"> 
      <div class="content-lodging">
        <img src="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="content-traveling">
        <img src="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>
Samuel Durkin
Samuel Durkin
48,402 Points
Samuel Durkin
Samuel Durkin
48,402 Points

It wants you to add the existing "group" class to the div, not create a new selector.

Hope that helps.

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Samuel Durkin ,

I added this code .secondary-content, .group:after { content: ""; display: table; c

But it is not working,

.secondary-content, .group:after { content: ""; display: table; clear: both; }

3 Answers

Samuel Durkin
Samuel Durkin
48,402 Points
Samuel Durkin
Samuel Durkin
48,402 Points

Hi again Lindsay,

You actually don't need the ".secondary-content" CSS selector at all, so you can remove it from your code. It should look something like this (literally just your code with the selector removed):

/* Complete the challenge by writing CSS below */



/* Clearfix ---------------------------------- */

.group :after {
  content: "";
  display: table;
  clear: both;
}

.content-lodging {
float: right;
}
.content-traveling {
  float:left;
}

Then go to the index.html tab and find the "secondary-content" div on line 9. You can add the "group" class to it which was in style.css from the beginning. It should look something like this:

<div class="secondary-content group t-border">

Let me know how that goes for you.

Luke Pettway
Luke Pettway
16,593 Points

Samuel is correct, try their solution and see how it works for you.

Leanne Millar
Leanne Millar
5,334 Points

Thank you .... I have been messing with this task for what feels like hours. I had forgotten to put group inside the div class in the HTML page. #SanitySaver

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points 
/* Try removing the space between group and :after */

.group :after {
  content: "";
  display: table;
  clear: both;
}
Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

Oh wait are you adding the class .group to the div that has the .secondary-content class? Try that, it through me for a loop too but that did it. Also, if you have that space after .group remove it as well. Not sure if it will take it or not but I know in chrome that space would probably cause it to not work correctly.