0

I have a <div> with a fixed height of 400px in which to display product bullet points using <li>. If I have 8 <li>, they fit pretty well in the space given. If I have only 4 <li>, there is a lot of extra white space below the <li>. How can I use CSS to make the <li> space evenly within the <div> instead of leaving any extra space in the bottom of the <div>?

I found this question: Evenly distributing or spacing list items vertically which seems to be pretty similar but there is no chosen answer and none of the answers really solve the problem. Ideally this would be just CSS not a javascript solution.

Community
  • 1
  • 1
Joe M.
  • 1,046
  • 3
  • 15
  • 37
  • 1
    [What have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) See [about Stack Overflow](http://stackoverflow.com/about). – John Conde May 25 '13 at 00:05
  • @JohnConde Yes fair question.. sorry I wasn't clear, I did try the solutions in the question I linked to (one involved javascript and one some CSS tags that I wasn't familiar with). Neither worked like I was hoping and I really don't want to use javascript for this anyways. Aside from that I pretty much did a lot of tinkering with the CSS in the chrome developer tools to try to get things to fit nicely but I'm coming here with the question because I'm hoping there is some CSS for this purpose that I'm just not aware of. – Joe M. May 25 '13 at 00:28

1 Answers1

2

I hope you don't have li's as direct children of a div, this would not be valid HTML.

To evenly distribute li's inside a ul, you could set the ul to display: table and the li's to display: table-row:

ul {
    height: 300px;
    display: table;
}
li {
    display: table-row;
}
li:before {
    content:'•';
    float: left;
    width: 20px;
    font-size: 1.8em;
    line-height: 0.75em;
}

Here's a jsFiddle

If you have a div wrapping the ul, and you want the li's to be evenly spaced vertically inside this div, all you'd need to change is setting the fixed height on the div instead, and setting the ul's height to 100%.

Edit

I realised the solution didn't play well in any version of IE, this updated version fixes that by rendering the bullet point inside the pseudo element, and it then set the font-size, line-height and width on the pseudo element to get it to look good and line things up, it works in IE8+ and all other browsers.

Mathijs Flietstra
  • 12,563
  • 3
  • 35
  • 66
  • Works perfectly.. thanks! I'll mark this as the answer. Just wondering how do the tags you put in li:before fix the bullet points? (why content:' '; ?) It works, but I don't understand it.. ? – Joe M. May 25 '13 at 00:47
  • the `li:before` renders a pseudo element inside the `li` container, it needs some content set (it won't be rendered without content set, it could be `''`, but I believe `' '` makes sure it works in all browsers) and then it is set to `display: list-item;` to ensure a bullet point is rendered. `float: left;` makes it sit nicely at the left inside the container and ensures the pseudo element doesn't force a line break. – Mathijs Flietstra May 25 '13 at 00:51
  • What you said is not correct. This is just a trick to make it work, the list is displayed as a table. You just put a "." before each item to make it look like a list item, but actually, it's displayed as a table row. – Khanh TO May 25 '13 at 02:37
  • @KhanhTo - If you checked the **Edit** part of my answer, you can see that I modified the solution after I added that last comment, as it worked fine everywhere except in IE. I should probably remove the comment. Besides that, I'm not putting a `.` character inside the pseudo element but a `•` character, which is an actual bullet point. Also, I don't think using a trick to make it work is a bad thing? It's about the desired result, not about how you arrive at the desired result. As long as it works it should be fine. – Mathijs Flietstra May 25 '13 at 02:39