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

Posted by Alexander D
Alexander D
8,685 Points

Floating elements

Hello community,

I have been struggling for the past day on a very simple concept. For some reasons, I am not able to float two elements in the center, like in the video below:

https://teamtreehouse.com/library/clearing-floats

1) The first issue is the clearing method. I do not understand where to position it. My understanding is that it needs to be placed on the most external wrapper. For instance, if there's a paragraph <p> included in an Article <article>, it needs to go to <article>.

2) The second issue is related to the floating items. Yesterday I almost managed to achieve the result wanted, but the elements weren't centered, as in the video-lesson above.

I included my simple HTML below:

<!DOCTYPE html>
<html>
  <head>
    <title>My site</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  <div>
  <header class="head">
    <h1 class="alex">ALEX</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </header>
  </div>

<header class="main-header">
  <h1 class="follow">Follow your dreams</h1>
</header>

<article class="">
  <div class="box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
      Ipsum has been the industry's standard dummy
      text ever since the 1500s,
      when an unknown printer took
      a galley of type and scrambled
      it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
     </p>
  </div>
</article>

<article class="">
  <div class="box2">
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
      Ipsum has been the industry's standard dummy
      text ever since the 1500s,
      when an unknown printer took
      a galley of type and scrambled
      it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  </article>

  </body>
</html>
}

This is the related CSS. The floated elements have been assigned the value of ".box"

 * {
  padding: 0;
  margin: 0;
  font-family: palatino;
  box-sizing: border-box;

}

.alex {
  font-size: 45px;
  color: white;
}

div {

    background: #daebe8;
}

ul {

  list-style: none;
  overflow: hidden;
  display: inline-block;

}

  li {

  float: left;
  padding: 15px;
  margin-top: 5px;
  border-left: 1px solid white;
  background: #001f3f;
}

.head {

  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

a {
  text-decoration: none;
  color: white;
}

li:first-child {

border: none;
}

li:hover {

  background: #bccad6;
  transition: all .5s;
}

.main-header {
  margin-top: 5px;
  padding-top: 170px;
  height: 850px;
  background: #ffa949;
  background-size: cover;
}

.follow {
  font-size: 90px; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  margin-top: 130px;
}

  .box {
  color: white;
  background-color: #667292;
  padding: 2% 5%;
  border-top: 5px solid #f1e3dd;
  border-bottom: 5px solid #f1e3dd;
  width: 40%;
  float: left;
}

.box2 {
  color: white;
  background-color: #667292;
  padding: 2% 5%;
  border-top: 5px solid #f1e3dd;
  border-bottom: 5px solid #f1e3dd;
  width: 40%;
  float: right;
}

.group::after {
  content: '';
  display: table;
  clear: both;

}

This is my codepen link https://codepen.io/DeMichieli/pen/YgeoLG

Thanks for all your help!

Alexander D
Alexander D
8,685 Points

As a note,

I recently added a <div> with the class of ".wrapper" wrapping around those two <articles>. Then, I set the ".wrapper" to have a margin on both sides. It seems that the elements are now floating centrally and the proportion are maintained. However, I am still not sure where to position the clearing element ".group"

I have udated my codepen link to make it easier to share: https://codepen.io/DeMichieli/pen/YgeoLG

Again, thanks for looking after someone with a big headache!

1 Answer

Christian Higgins
Christian Higgins
15,758 Points
Christian Higgins
Christian Higgins
15,758 Points

As you said,

My understanding is that it needs to be placed on the most external wrapper.

The most external element outside of the two boxes isn't article. It's the .wrapper div, isn't it?

Alexander D
Alexander D
8,685 Points

Hello Christian,

Thanks for your response!

I added the "group" clearing technique to the <div> wrapping element, but it's not working out. I see color in between the two floating elements, and it should be white to my understanding.

https://codepen.io/DeMichieli/pen/YgeoLG