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

Kenny Parewijck
Kenny Parewijck
4,602 Points
Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

Question about clearing and floating elements with :nth-child()

Hello everybody

Having a question about something here.

Look at these screenshots:

Good one: http://postimg.org/image/h8mjtxprb/ Bad one: http://postimg.org/image/mviwres9z/

What you are seeing is the responsive version of a portfolio site. I have a problem with the fifth list item. As you can see this list item won't clear the float and stick to the left on the next line, although I have coded my css with gallery:nth-child(odd).

Could someone help me out with this?

<!Doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Kenny Parewijck - Ondernemer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,800,700italic,400italic,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Kenny Parewijck</h1>
        <h2>Ondernemer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Project portfolio</a></li>
          <li><a href="about.html">Over mij</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="About project one" />
              <p>Beschrijvende tekst over Project één. Hier komt de algemene beschrijving van het project</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="About project two" />
              <p>Beschrijvende tekst over Project twee. Hier komt de algemene beschrijving van het project</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="About project three" />
              <p>Beschrijvende tekst over Project drie. Hier komt de algemene beschrijving van het project</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="About project four" />
              <p>Beschrijvende tekst over Project vier. Hier komt de algemene beschrijving van het project</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="About project five" />
              <p>Beschrijvende tekst over Project vier. Hier komt de algemene beschrijving van het project</p>
            </a>
          </li>
        </ul>
          </section>
      <footer>
        <a href="https://nl-be.facebook.com/kenny.parewijck"> <img src="img/facebook-wrap.png" alt="Facebook pagina Kenny Parewijck" /></a>
        <a href="https://twitter.com/?lang=nl"><img src="img/twitter-wrap.png" alt="Twitter pagina Kenny Parewijck" /></a>
        <p>&copy; 2015 kenny Parewijck</p>
      </footer>
    </div>
  </body>
</html>

/*********** GENERAL STYLES ***********/
body {
  color: #999;
  background: #fff;
  font-family: 'Open sans',sans-serif;
  font-size: 0.8rem;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

header {
  background: #69b37a;
}

nav {
  background: #589a68;
  font-family: 'Open sans', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
}

nav ul {
  padding: 0;
  margin: 0;
}

h1,h2 {
  color: white;
}

h1 {
  font-weight: normal;
  font-family: 'Changa One',sans-serif;
  font-size: 2rem;

}

h2 {
  font-weight: normal;
  font-size: 0.8rem;
}

img {
  max-width: 100%;
}

footer {
  text-align: center;
  font-family: 'Open sans', sans-serif;
  font-weight: normal;
  color: #cdcccc;
  font-size: 0.8rem;
  clear: both;
}

ul {
  margin:0;
  padding:0;
}

/*********** ID STYLES ***********/
#logo {
  text-align: center;
  margin: 0;
}

#wrapper {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 5%;
}



/*********** PSEUDO CLASS STYLES ***********/

nav a, nav a:visited {
  color: white;
}

nav a:active {
  color: #306841;
}

nav a:hover {
  color: #306841;
}

nav a.selected {
  color: #306841;
}


/*******************************************/
/************* PORTFOLIO PAGE **************/
/*******************************************/

#gallery li a p{
  color: #bec4c8;
  margin:0;
  padding:10px;
}

#gallery li {
  background-color: #f5f5f4;
  margin: 0;
  padding: 0;
  float: left;
  width: 45%;
  margin: 2.5%;
}

#gallery:nth-child(odd) {
  clear:both;
}

7 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I've just had a play on Codepen and something like this will work. :)

http://codepen.io/webdesignerjon/pen/ZQGrOr

<ul id="gallery">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul> 

#gallery > li:nth-child(odd) {

  color: red;

}
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Try adding the following in your nth child selector. 

#gallery:nth-child(odd) {
  clear:both;
  content:"";
  display: table;
}

I don't know if this course touches on it later but this is your clearfix solution when you want to clear a float.

You often use it by using it with a class selector and adding the value as a class attribute. Hope this helps :)

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi,

Thanks for the reply but this isn't the solution. Try adding a lot of text to the p element inside the third list element. You will see that the clear won't take place actually.

A note though: If I use a class (css: clear both) and I use this class on the first, third and fifth list element in the html code then everything works fine..

But I want a solution for the nth-child because if I have a bigger project adding a class manually to all these list items isn't a good solution..

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Found the problem:

I was using the nth-child wrongly.. Could somebody explain me why the li should go before it? Ass I see it the odd child from the #gallery (which represents the parent ul) is an li, no?

#gallery li:nth-child(odd) {
clear:both;
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

To be honest, I should have picked up on that :)

The nth-child works directly with the child elements of it's parent.

With the right class, you could work with nth child without selecting the parent. It takes a bit of experimentation, I don't use pseudo classes as often as I should but selecting the li, which is a child of ul is often enough to start selecting the child elements that you want. You could add the direct child (>) combinator to be more specific about which group you want nth-child to work with :-)

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Could you give me an example for a code like that please? :-p

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

allright thanks.

so the > just tells the css that we want the li:nth-child(odd) has to come from the element with the id we gave it. Is this the same then as using: #gallery li:nth-child(odd). ?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

selects any direct child of an element, so any other markup that is the same would also be selected. That's why we have the ID selectors like with your #gallery ID selector so that would differentiate li:nth-child(odd). from #gallery li:nth-child(odd). .

You're probably aware by now of CSS's cascading nature. It will always look for elements that match the selector and pick them out appropriately.

http://codepen.io/webdesignerjon/pen/JGdpyV

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Oke that's clear!

thanks!