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

Watch Video

Posted December 19, 2016 8:27pm by

Float: left

I am a little confused when the float left is applied. Why does the image move down to the footer along with the other? When float: right was initially applied, that made sense as the image moved to the right of the container from its current position. Why would the 2nd image move down to the footer and stay to the left in response to float:left?

December 19, 2016 9:50pm

Could you paste your code and link to the assignment?

December 19, 2016 9:58pm

here is the link to the assignment: https://teamtreehouse.com/library/css-basics/basic-layout/floats

/* Base Styles -------------------- */

{ box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: 1.7em; / 34px */ }

img { max-width: 100%; margin-bottom: 20px; }

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); text-decoration: none; }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header { padding-top: 170px; height: 850px;

background: #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover; }

.title { color: white; font-size: 1.625rem; /* 26px/16px */ }

.intro { font-size: 1.25em; /* 20px/16px */ line-height: 1.6;
}

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { padding-top: 25px; padding-bottom: 95px; }

.secondary-content { padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6; }

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 20px; display: inline-block; }

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

.t-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles ------------------ */

.primary-content, .secondary-content { width: 75%; padding-left: 50px; padding-right: 50px; margin: auto; max-width: 960px; }

.wildlife { color: white; text-align: left; padding: 18% 24%; border-top: 10px solid #ffa949; margin: 105px 0 60px; background: #434a52 url('../img/bear.jpg') no-repeat center; background-size: cover; }

/* floated columns */ .resorts, .tips{ width: 46.5%; }

.tips{ float: right; {

.resorts{ float: left; }

.arrow { width: 50px; }

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

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

<!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>

January 17, 2017 12:32pm

You're welcome Stefana. :) Go for it!

3 Answers

December 20, 2016 3:20pm

You'll use float left if you want the div coming up next to be displayed next to the other one. So div A get's a float left (which only works is the width's of div A and div B together aren't bigger than the size of the wrapper. Which is 100% of the window size most of the time) and div B is now able to be displayed on the right of div A. A-B

When you give div A a float: right; and div B a float: left; they'll turn around though. So B is coming first and on the right of B div A is being displayed. B-A.

It is wise to put those floating divs into a wrapper together and clear the wrapper. When you'll use floating elements they don't be a part anymore of the structure of the block elements and the footer (or whatever div is coming next, will ignore the floating elements.

give the wrapper a (n extra) class in your HTML named "clear" and write the following in your css file.

.clear::after{ content:" "; clear:both; }

Now your design hopefully wont break anymore.

January 13, 2017 7:38pm

Thank you! Sorry for the late response =) this explained very well

January 17, 2017 12:33pm

Don't worry! Happy to help you!

January 11, 2017 10:47am

Hi Stefana Gloginic,

In addition to the excellent reply that Máire gave you, which I think btw deserves at least a thank you, since she's not an employee, she did it to help you, there is another detail that I identified: When you created the CSS rule for the .tips class selector, you closed it wrongly:

".tips{ float: right; {"

That is:

.tips {
    float: right;
{ /* closing bracket is actually an opening one */

when it should be:

.tips {
    float: right;
}  /* this is the correct one */

This is one area that we have to exercise deep care with. What works best for me, and I learned it from Guil, is opening and closing brackets right away, and only then writing the content, same applies to the semicolon that closes a rule: write first the property, then the colon and the semicolon, and only then write the value before the semicolon.

HTH! :)

Side-note: when you want to paste code here, it's best practice to do so with then start coding next line, and, one line after you finished code, again (the one under ESC key).

January 11, 2017 10:52am

OK, my wrong, the symbol you have to use to post code (side-note) is this one: ` (it is immediately under ESC key in most keyboards) three times in the line before you start coding, then code, and in the line after your code, again three times that symbol.

Hope that was clearer now :)

January 11, 2017 11:15am

Thanks Nico. :)

January 13, 2017 7:39pm

Noted! Apologies for the lack of reply, I was away for some time. Thank you so much !

January 14, 2017 4:46am

Hey, no problem. And always a pleasure to remain within the nice collaborative spirit of Treehouse community. Tomorrow I might be the one asking, and you may help me get unstuck. :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Stefana Gloginic

Stefana Gloginic

Float: left

Joey Ward

Joey Ward

Stefana Gloginic

Stefana Gloginic

Máire van Blerck

Máire van Blerck

3 Answers

Máire van Blerck

Máire van Blerck

Stefana Gloginic

Stefana Gloginic

Máire van Blerck

Máire van Blerck

nico dev

nico dev

nico dev

nico dev

Máire van Blerck

Máire van Blerck

Stefana Gloginic

Stefana Gloginic

nico dev

nico dev