CODEWITHSUNDEEP
htmlcsshtml-listscss-float
tsusanka
tsusanka

Reputation: 4841

<ul> height when containing floating <li>

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.

Upvotes: 32

Views: 48364

Answers (4)

Husen
Husen

Reputation: 935

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 :)

Upvotes: 1

Ali Youhanaei
Ali Youhanaei

Reputation: 384

test it:

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

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

Upvotes: 1

thirtydot
thirtydot

Reputation: 228162

Good options to contain the floats:

Upvotes: 63

Trevor
Trevor

Reputation: 10993

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.

Upvotes: 3

Related Questions