<ul> height when containing floating <li>

tsusanka picture tsusanka · Jul 19, 2011 · Viewed 46.1k times · Source

I have a list:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

All the <li> are floating. I need the height of the <ul> box. If I remember correctly this is not valid:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

How can I do this? The number of items in the list can be different so I can't use fixed height.

Answer

thirtydot picture thirtydot · Jul 19, 2011

Good options to contain the floats: