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

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points
Posted by Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

I really can't get my head around floats!!! Someone, please help!? :(

I understand everything else so far in CSS but I find it so difficult to align things vertically using floats.

  1. On my practice project, I've managed to align two pictures together which consists of a paragraph and a list. However, the left picture is not perfectly proportioned to the right one. I've tried clear-fix, width, and other options, but it still is not proportioned! What do I do?

  2. What if I want two div's to align vertically together but I want to use a percentage that does not add up to 100%? Is this possible? Or must float elements add up to 100% of width?

  3. Finally, what if I managed to align two things vertically BUT the left/right float moved my div all the way down the webpage, what do I do??

Please, anyone, help me understand this using simple English, I know to some it's simple but I'm really struggling with this and it's so frustrating :( I want to progress with front-end but I don't feel I deserve to unless I fully understand this.

Many thanks before.

Here is the code:

  <body>

  <header class="main-header">
    <span class="slogan">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, id.
    </span>
    <h1>Washington DC, U.S.A</h1>
    <img src="./img/arrowdown.png" class="arrow-down" alt="">
  </header>

  <div class="container">
  <div class="first-content t-border">
    <p>
      Lake Tahoe is one of the most breathtaking attractions located in Californ
      ia. It's home to a number of ski resorts, summer outdoor recreation, and t
      ourist attractions. Snow and skiing are a significant part of the area's r
      eputation. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asper
      iores, in.
    </p>
    <a href="#" class="callout">Find Out More</a>
  </div>

  <div class="forest">
    <h2>Our Beautiful Forests</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam odit,
      reiciendis ea rerum aliquam, eius distinctio sequi possimus alias ad, qui,
      ipsum asperiores obcaecati nobis omnis. Nulla eum facere, officia dolorem
      soluta. Dolore esse earum nobis quasi tempora odio veniam.
    </p>
  </div>
  <a href="#" class="callout">See &amp; Experience Our Forests</a>



  <div class="greenery t-border ">
    <img src="./img/greenery.jpg" class="img" alt="">
    <h3>Enjoy Our Greenery</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia facere
       consectetur ratione, sunt necessitatibus harum ad ipsa laudantium nihil
       dolorem.
    </p>
    <ul>
      <li><a href="#">Washington National Park</a></li>
      <li><a href="#">Washington Programming Park</a></li>
      <li><a href="#">Washington Web Developer Park</a></li>
    </ul>
  </div>

  <div class="parks group">
    <img src="./img/park.jpg" class="img" alt="">
    <h3>Enjoy Our Parks</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia facere
       consectetur ratione, sunt necessitatibus harum ad ipsa laudantium nihil
       dolorem.
    </p>
    <ul>
      <li><a href="#">Park Number 1</a></li>
      <li><a href="#">Condet Number Park 2</a></li>
      <li><a href="#">greenery Programming Way</a></li>
    </ul>
  </div>
</div>

  <footer class="main-footer">
    All Rights Reservered, &copy; 2017 Timothy Harrington Bourne
    <br>
    <a href="">Back to Top>></a>
  </footer>

  </body>
</html>

Here is the CSS:
* {
  box-sizing: border-box;
}

header{
  text-align: center;
  height: 800px;
  background: url('../img/bonfire.jpg') no-repeat center / cover;
}

h1 {
  font-size: 6rem;
  color: rgba(255,255,255,.8);
  line-height: 1.2;
}

ul {
list-style-type: none;
}

body{
  font: normal 1.2em/1.5em "century gothic", helvetica;
  color: rgba(0,0,0,.5);
  margin: 0;
}

img {
  width: 100%;
  margin-top: 30px;
}

/* Pseudo */
a:link{
  color: rgba(0,0,0,.7);
  text-decoration: none;
}

a:hover{
  color: #DDD;
}

/* Header */
.arrow-down {
  width: 100px;
  opacity: 0.5;
}

.container {
margin: auto;
width: 60%;
text-align: center;
}

.main-header {
  padding-top: 250px;
  margin-bottom: 20px;
}

.callout {
  font-size: 24px;
  display: inline-block;
  margin-bottom: 30px;
  margin-top: 50px;
}

.slogan {
  font-size: 24px;
  color:rgba(255,255,255,.8);
  font-style: italic;
}

.t-border {
  border-top: 3px solid rgba(0,0,150,.3);
}

/* Primary  */


.forest {
  height: 500px;
  background:
  linear-gradient(180deg, green -70%, lightgreen -50%, transparent),
  url('../img/forest.jpg') no-repeat center/cover;
  padding:150px 60px 0;
  color: white;

}

/* --------------------- TWO BOXES ------------------ */

.greenery, .parks {
  width: 46%;
  padding-left: 20px;
  padding-right: 20px;

}

.parks {
  float: left;
}

.greenery{
  float: right;
}

.main-footer {
  text-align:center;
  display: inline;
}
Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It would be easier to analyze the issue with complete code and resources (HTML, CSS, and images). To share everything at once you can make a snapshot of your workspace and post the link to it here.

There seems to be some HTML that is not shown in these screenshots that is pushing down the left column.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I'm not an Atom user, but it it would not have a feature like the snapshot that automatically creates hosting and gives you a link. You can cut/paste the code into markdown-formatted code blocks.

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

On a page of this complexity, there's several ways to approach the layout, and also to fix layout issues. But here's one set of suggestions for aligning the columns:

  • change the display mode of the "callout" class to "block" (instead of "inline-block")
  • remove the "t-border" class from the div that also has the "greenery" class
  • add a clearfix to the "container" class

An example of that last item:

.container::after {
  content: "";
  display: block;
  clear: both;
}

I'm not sure what you mean by "proportioned". If you're referring to image aspect ratios, I didn't have the actual ones so I substituted ones from placeimg.com.

Column width set using percentages must total 100 (or less). If they total more, they won't appear side-by-side.

The description "moved my div all the way down the webpage" sounds like what would happen if the widths are excessive.

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points
Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

That did the trick for aligning the columns and clearing up the floats but my left image is still not proportionate to the right one (https://ibb.co/kEG2En).

How can I prevent this issue from happening again in the future Steven? How do I know which element to use in different situations? Is it just a matter of practice??

Also thank you so much for taking your time to help me Steven, I really appreciate it! :)

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You'll always have choices of how to implement a design, and yes, it will take a bit of practice to know what to use in each situation.

Those images seem to have different aspect ratios. If possible, edit one of the images to match the ratio of the other, then no code changes are needed. Otherwise, you must decide what you want to change. Do you want to stretch, squash, or crop one of the images? Stretching and squashing can be done by setting explicit height and width values. Cropping can be done with a containing element or with the "clip" or "object-fit" properties.

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points
Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

Steven Parker Hmm I see, guess have to just practice this whole floats and inline thing over again. By the way, What do you mean by explicit width and height? I want to squash the image on the left and I've set img { width: 100% height:100% } But still not proportionate.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You might get better results using screen-relative units, for example:

.img {
    width: 25vw;
    height: 14vw;
}
Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points
Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

That sure did the trick. I haven't learned the VW yet so I do not know how it functions, what it does and when to apply it. Will those number (25 &14) always work when it comes to squashing images Steven?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

These values would be chosen for the images and layout of a particular page. The 25 here is an approximation of the column width, and together with the 14 (25/14) it approximates the aspect ratio of the narrower image.

VW just stands for "viewport width", so the number is a percentage of that width. The 100% you were using before represents the containing element width.

Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points
Timothy Harrington Bourne
Timothy Harrington Bourne
6,372 Points

Ah I see.. I think i get it, I'll be sure to play around with it. Again thanks a lot for the help Steven! :D

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Thanks Steven and Timothy for helpful explanations and tips! Bookmarked.

David