How to expand the div container of ul and li?

Question

I have a div with its content (list inside),

<div id="container">
     <ul id="list">
       <li>
         <div class="title">
              something
         </div>
         <div class="text">
             something again
         </div>
       </li>
        <li>
         <div class="title">
              something
         </div>
         <div class="text">
             something again
         </div>
       </li>
    </ul>
</div>

And my items from list are displayed float:left, and I want to the div container expand in height as its content.

#container{ 
    position: relative; 
    width: 100%;    
    padding-bottom: 30px;       
}

#list{
    position: relative;
    padding-top: 80px;
    width: 95%;
    /*height: 100%;*/
    padding-bottom: 10px;
}

#list li{
    position: relative;
    float: left;    
    list-style: none outside none;
    width: 20%;
    height: 170px;  
    /*border:1px solid black;*/
}

So where is the `float: left;` in your CSS? You are missing a closing angle bracket (`>`) off your `#container` div by the way. — Andy, Jul 17 '14 at 14:43
Please show a more complete example of your code. If possible create a jsfiddle so that we can see what the problem is. — Elmer, Jul 17 '14 at 14:47
Its more like, I have that Div, container, and, my list has 13 elements. And for instance, my container has background-color: red; and I want that div container expand based on its 13 elements. I have 5-5-3 . — Nuno, Jul 17 '14 at 15:21

score 4 · Accepted Answer · edited May 23 '17 at 11:48

4

You have several options:

Clearfix on the container:

#container:after {
    clear: both;
    content: "";
    display: table;
}

The use of overflow:

#container {
    overflow: hidden; /* or: auto | scroll */
}

Float the container:
```
#container {
    float: left;
}
```

Using inline-block instead of float for the list items:

#container ul li {
    display: inline-block;
    float: none;
}

edited May 23 '17 at 11:48

Community

1
1

answered Jul 17 '14 at 14:45

Adrift

58,167
12
92
90

I think it was the "overflow:hidden", because now its working :) thanks – Nuno Jul 17 '14 at 15:26

score 1 · Answer 2 · answered Jul 17 '14 at 14:47

1

Try this approach...

li {
    display: inline-block;
    float: none; /* only if you have this set as you mentioned in your post */
}

#container {
  height: auto;
}

answered Jul 17 '14 at 14:47

Christopher Harris

112
4

Thanks for answering, but as I said above, i think my "overflow:hidden" was missing. :) – Nuno Jul 17 '14 at 15:27

How to expand the div container of ul and li?

2 Answers2