Question

I’ve been all over stackoverflow looking for a solid solution for this; however, I’m coming up a short. I believe my problem is just in my semantics.

http://jsfiddle.net/hzRAN/10/
here’s some sample code.

For best results: I would love for this script to re-adjust if there is a page width change.

the real code is linked from this website
http://designobvio.us/DoUs/Blog.html
its a fluid layout which is why I need the horizontal list item to justify itself correctly.

Thanks for the help !

Answer 1

The only way you can accomplish this is by setting the width of each list item or by using padding:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;   /* remove the indention */
  overflow: hidden;   /* to enclose the float children */
  }

li {
  width: 20%;  /* actually, use some slightly undersized value to supply a bit of slop */
  float: left;
  }