2

Hello there I have tried the following which I think should be valid CSS and it does not work (tested with Google Chrome).

<ul>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
<li><a href="...">bla</a></li>
</ul>

The CSS:

ul li {
    float:left;
}

ul li:nth-child(3):after {
    content:"";
    display:table;
    clear:both;
}

The floating list elements should start a new row after each third element in the list within a responsive design. Do you have a solution suggestion? Isnt this supposed to work?

Blackbam
  • 17,496
  • 26
  • 97
  • 150

3 Answers3

6

Just apply like below.

 ul li:nth-child(4n) {clear:both;}

DEMO

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • Thanks this is working I was thinking to complicated lol ;-) The clearfix was the problem therefore selectors are working nice. – Blackbam May 29 '15 at 12:51
1

Clear fix technique must be used on container element, NOT on the floating elements. It's designed for fixing the height collapse of the container.

To answer the question - you could clear the float on the first child of each row (3 items).

ul li:nth-child(3n+1) {
    clear: both;
}


ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul:after { /*where you apply clearfix hack*/
    content: "";
    display: table;
    clear: both;
}
ul li {
    float: left;
    margin-right: 5px;
}
ul li:nth-child(3n+1) { /*where you clear the float*/
    clear: both;
}
<ul>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
    <li><a href="#">bla</a></li>
</ul>
-clearfixed-
Stickers
  • 75,527
  • 23
  • 147
  • 186
0

Try this:

ul li:nth-child(3n+1) {clear:both;}
Suraj Mevada
  • 129
  • 4