Question

danielsherson suggested the following code for making a list the exact width of its largest item. It works great if the list isn’t too long in length. I tried supplying a height and the code doesn’t compensate for the width of the scroll bar. Any thoughts on who to accomplish that ?

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

Answer 1

One fix for situations like this is to ensure there is always a scrollbar using this rule:

body {
    overflow-y: scroll;
}

The scrollbar will be grayed out when not needed. This way you are able to design your page with one less variable to consider.