Bootstrap: CSS - height of list-group-item

Question

Please Consider follow JSFiddle:

http://jsfiddle.net/7W2r4/12/

As you might notice: the list-group-item is fully collapsed. And i can\'t seem to mak

Answer 1

You can add overflow:hidden or other "clear-fix" code to the list-group-item if you need to retain the floats within the items. Floats always cause problems with the height of the floated items. Clearing them or setting overflow will force the height to be calculated properly. See CSS: Floating divs have 0 height for more info on this.

.list-group-item
{
  overflow:hidden;  
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ffffd;
}

Since you are using Bootstrap you could add the class="clearfix" to HTML for the list-group-items

Answer 2

Removing the float: left; from .itemDescription will fix your issue fiddle, so the complete style for .itemDescription will be:

.itemDescription
{
    width: 30%;
    vertical-align: middle;
    height: 100%;
    line-height:100%;
    vertical-align: middle;
}