<ul> height when containing floating <li>

Question

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.

Alicia

When you float "ALL" the elements in a containing element, the containing element height collapses and does not "wrap" around the floated element. Many ways around this. Adding overflow: auto to the containg element solves the probelm. Adding extra element at the bottom alos solves the problem. – Ruhr

Answer 1

Good options to contain the floats:

• Add overflow: hidden to the ul.
• Use clearfix.

Cauterant

thank you and thx for the links as well I would google it anyway :) – Alicia

Thanks for the answer. I don't get the logic of why this works. One would think that overflow: hidden would do the opposite – Oresund

also why does the containing element not wrap around the float elements ? So why does the ul not wrap around the floated li elements ? – Vegetarianism

clearfix is enough.. no idea why someone would add overflow:hidden to the ul in this case lol ^^ – Mera

@Vegetarianism #3401249 – Vd

Answer 2

This isn't a direct answer to your question, but as an alternative could you consider using display:inline-block? These days I just use that instead of float where possible, as essentially most of the time it can achieve the same sort of objective without the total hassle of making containers properly contain inner floating elements and having to clear them all the time.

Custard

inline-block is a valid option, but it has it's own (solvable) downsides such as being affected by whitespace in the HTML, and not working in IE7 without messing around. – Cauterant

Ah, understood. I must confess that I have the luxury of being able to ignore older browsers like IE7 because what I do is kind of specialised stuff whereby the browser used by the end user is kind of known and controlled. It was worth a mention anyhow. – Custard

Answer 3

test it:

ul { overflow: hidden; }
li { float:right; display:block; }

add class to your elements, don't do this for all elements.

Wangle

Answer 4

Here, i am presenting, one of the easiest way to handle this kind of situations.

Float left always have some reaction and not good to use if we have some alternative of it.

The Alternative is :

li { display:inline-block; }

No need to add extra code like float:left and overflow:hidden :)

Papa