<ul> li float dont fill the block

Each time i get this problem.. but the old fix doesn't work this time...

I have a <ul> fu开发者_开发技巧ll of <li> that are floated left

those are perfect.... but i like to have a nice box around... and i style the <ul>

but the <ul> is "sort of empty" because the insides are floated...

the trick with the <div style="clear:both"> dont work... but event if it work.. it's ugly..

what is the "right" method to get the <ul> a size.. without hardcoding the width and height ?

as both point out... the solution was : OVERFLOW

here is the explaination (for future ference) : The overflow property specifies what happens if content overflows an element's box. The new solution

It was Alex Walker who first posted a new, simpler solution, though he gives the credits for actually inventing it to Paul O'Brien. In any case, the solution seems to be:

div.container { border: 1px solid #000000; overflow: auto; width: 100% }

Set overflow to auto for the ul elements..

ul{overflow:auto;}

I found a better solution:

Set ul properties:

list-style-type:none;
margin:0;
padding:0;
border: 1px solid #000;

Set its li properties:

display:inline-block;
position:relative;

This worked for me. The ul is now wrapped around the li.

Note: However the space between two li can't be cleared in this sense.