Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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!

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

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?

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