CODEWITHSUNDEEP
htmlcss
Alan2
Alan2

Reputation: 24592

How can I make a <div> expand to enclose a large number of <li> elements within a <ul>?

I have the following HTML:

<div class="columns">
   <ul class="controls-buttons">
       <li><a data-href="/xx" id="btn-1" Topic 50.5">1</a></li>
       ...
       <li><a data-href="/yy" id="btn-2" Topic 50.5">2</a></li>
   </ul>
</div>

CSS:

ul.controls-buttons {
   float: right;
}

li {
   height: 1.8em !important;
   margin-left: 0.7em !important;
   padding: 0.333em 0.29em !important;
}

ul.controls-buttons li {
   display: block;
   float: left;
   margin: -1px 0 -1px 0.5em;
   line-height: 1.333em;
   padding: 0.333em 0.25em;
}

There are approximately 100 buttons and they flow outside the boundaries of the enclosing <div class="columns"

Is there a way that I can make the <ul> occupy space so the <div> expands to enclose it ?

Upvotes: 0

Views: 170

Answers (4)

RbG
RbG

Reputation: 3213

i think overflow:hidden; in your div.column will solve your probem

for more knowledge :: SOURCE

overflow: hidden; This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

Upvotes: 2

mike
mike

Reputation: 101

This CSS works:

    ul.controls-buttons {
    float: right;
    }

li {
   height: 1.8em !important;
   margin-left: 0.7em !important;
   padding: 0.333em 0.29em !important;
}

ul.controls-buttons li {
   display: block;
   float: left;
   margin: -1px 0 -1px 0.5em;
   line-height: 1.333em;
   padding: 0.333em 0.25em;
   width:100%
}

Upvotes: 0

Razz
Razz

Reputation: 4015

Add <div class="columns" style="overflow: hidden;"> then it will occupy the same space as the float inside of it.

Upvotes: 2

Praind
Praind

Reputation: 1581

If you didn't, you should float the div. If you float something in the inner of a div but not the div itself, this can cause problems with overlapping. In your case that the list is higher than the div

Upvotes: 0

Related Questions