Too much space (floating divs)

I'm floating divs and now there is some gap. This is my code:

<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    display: block;
    float: left;
    border: 1px solid red;
    width: 80px;

}
</style>

<ul>

        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
        <li>Item 20</li>
        <li>Item 21</li>
        <li>Item 22</li>
        <li>Item 23</li>
        <li>Item 24</li>
        <li>Item 25</li>
        <li>Item 26</li>
        <li>Item 27</li>
        <li>Item 28</li>
        <li>Item 29</li>
        <li>Item 30</li>
        <li>Item 31</li>
        <li>Item 32</li>
        <li>Item 33</li>
        <li>Item 34</li>
        <li>Item 35</li>
        <li>Item 36</li>
        <li>Item 37</li>
        <li>Item 38</li>
        <li>Item 39</li>
        <li>Item 40</li>
        <li>Item 41</li>
        <li>Item 42&l开发者_Go百科t;/li>
        <li>Item 43</li>
        <li>Item 44</li>
        <li>Item 45</li>
        <li>Item 46</li>
        <li>Item 47</li>
        <li>Item 48</li>
        <li>Item 49</li>
        <li>Item 50</li>
        <li>Item 51</li>
        <li>Item 52</li>
        <li>Item 53</li>
        <li>Item 54</li>
        <li>Item 55</li>
        <li>Item 56</li>
        <li>Item 57</li>
        <li>Item 58</li>
        <li>Item 59</li>
        <li>Item 60</li>
        <li>Item 61</li>
        <li>Item 62</li>
        <li>Item 63</li>
        <li>Item 64</li>
        <li>Item 65</li>
        <li>Item 66</li>
        <li style="" class="">
    Multiple<br>
    Lines
    </li><li>Item 67</li>
        <li>Item 68</li>
        <li>Item 69</li>
        <li>Item 70</li>
        <li>Item 71</li>
        <li>Item 72</li>
        <li>Item 73</li>
        <li>Item 74</li>
        <li>Item 75</li>
        <li>Item 76</li>
        <li>Item 77</li>
        <li>Item 78</li>
        <li>Item 79</li>
        <li>Item 80</li>
        <li>Item 81</li>
        <li>Item 82</li>
        <li>Item 83</li>
        <li>Item 84</li>
        <li>Item 85</li>
        <li>Item 86</li>
        <li>Item 87</li>
        <li>Item 88</li>
        <li>Item 89</li>
        <li>Item 90</li>
        <li>Item 91</li>
        <li>Item 92</li>
        <li>Item 93</li>
        <li>Item 94</li>
        <li>Item 95</li>
        <li>Item 96</li>
        <li>Item 97</li>
        <li>Item 98</li>
        <li>Item 99</li>
        <li>Item 100</li>
    </ul>

You can see the gap left from the 'Multiple lines' block. How can I automatically 'fill' this space?

Regards, Kevin

The problem is that in multi-line cells, only 2 pixels will be used for borders, where as in two cells that occupy the same space, there would be used 4 pixels of border. This creates a gap of 2 pixels.

One solution is to use outline instead of border. The outline property does not take up space on the page; it just draws a border around the object on top of everything else.

So instead of border: 1px solid red, you can use outline: 1px solid red.

See for yourself on this jfiddle demonstration. Notice that I also added a line-height: 1.4em, but that is only to give the cells a little more space, since the cells with the outline property effectively are 2 pixels deeper.

You can add a min-height to the ul li selector to the minimum height of the "Multiple Lines" li.

In my case, I added this to ul li

 min-height:37px

But that only solved the issue for my default font size and now, EVERY ul li will be at least 37px in height, which may not be what you want.

http://jsfiddle.net/ethBT/

I don't think that you can automatically fill this space. The way your code works it basically says - float everything left. Since one item is larger it takes up more room. As mrk pointed out just now, you can set the minimum height of all li to be that of multiple lines. Although this means all cells will be twice as large and I don't think this is what you want.

I can't think of an alternative that will get this effect without falling back on something that gives you more control. For instance a table.