Remove Margin on Every Fourth List Element?

[siouxfan45]

I’m attempting to remove the margin on every fourth list element.

My CSS looks like this:

ul.profiles { list-style:none; overflow:hidden }
ul.profiles li { display:inline; float:left; width:32%; background:green; margin-top:0px!important }
ul.profiles li+li { margin-left:2% }
ul. profiles li:first-child, ul. profiles li:nth-child(3) { margin-left:none!important }

I’m using this for a “Staff Profiles” page on a template I’m making for a blog network. You can see where the fourth list element (Tom Frank’s profile) has a left margin on it still…
http://themeforward.com/demo2/about/

Anybody know what I did incorrectly?

[Merri]

You can avoid !important by giving more specific rules, ie. use #content ul.profiles liand then the cascade will be more powerful than the property given in #content ul li. In 99.9% of cases where you think you need !important you don’t need it.

I’ll give you another option here instead of telling how to really use :nth-child, because I’m evil. No really, I get Palpatine in online Star Wars personality tests all the time. So anyhow.

#content ul.profiles {
  /* eliminate font size */
  font-size: 0;
  /* justify is awesome with inline-blocks */
  text-align: justify;

  list-style: none;
}

/* font size is zero so this will have no height */
/* also makes sure all lines are justified */
#content ul.profiles:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#content ul.profiles li {
  /* inline-block instead of float so we get justify */
  display: inline-block;
  /* restore font size... */
  font-size: 16px; /* ... for browsers with no rem support */
  font-size: 1rem; /* rem is awesome! */
  /* undo justify inside the blocks */
  text-align: left;
  /* align to top of row */
  vertical-align: top;
 /* no need for left margin! MAGICZ! */
  margin: 0 0 1em;
  /* line-height is best when unitless */
  line-height: 2;

  width: 32%;
  background: green;
}

Could be worth your while to learn why and how this works :)

[Merri]

Unfortunately that is something where justification doesn’t work with that well: it will always justify, so the only option would be to add an empty element with the same width as a real visible element would have.

So lets get back to the floats. First lets see the situatation:

1. Your floated elements may vary in height. Just zoom in or out and the height of the elements will change.
2. Difference in height causes that sometimes elements on the next row don’t go the first column.

First route would be to support very old browsers. Browsers like IE7 and IE6. With those in mind we can’t use :nth-of-type as there is no support. To be able to support these browsers there are some limitations one has to apply to the float design:

1. All elements must be of same height. Otherwise the floats may fail to align properly.
2. Instead of setting left margin use right margin. Every child will have it.
3. Make the container wider so that even the last element can have right margin.

End result: you get the wanted visual appearance and there are no side effects with floats going all around the place when zooming in and out. Even in browsers as old as IE7 and IE6!

But it is likely IE8 is your minimum target. So how about telling finally about that :nth-of-type rule? This will also allow variable height floated elements.

#content ul.profiles li:nth-of-type(3n+1) {
  clear: left;
  margin-left: 0;
}

And all problems are fixed. The rule matches 1st, 4th, 7th, 10th… etc. element. Clearing the float makes the element appear after all previous three floated elements no matter what their height is.

[Author]

Posts