CROSP CROSP - 6 months ago 14
HTML Question

Put <i> inside <li> at the bottom autoresize height

I am trying to style a little bit my menu.

I am using

bootstrap
and
font awesome
css styles.
I think it will much better to show the problem on live page.
I need to achieve two goals


  1. I need to put this
    chevron
    icon at the bottom with little margin (2-3px)
    like this. So it should be at the bottom in any case with little margin.



enter image description here


  1. The problem is that
    < li >
    items is not resized according to the content inside it. As you can see on this screenshot. It is sticked to the bottom border and if I add some margin I will get following result



enter image description here
enter image description here

I am using following styles

.item-icon-container {
margin: 2px 0 15px 0;
float: right;
display: block;
height: 100%;
}
.item-icon-container .expand-indicator {
display: block;
}
.item-icon-container .badge {
display: block;
}


Here is full
HTML
code http://pastebin.com/S26C9xSU


Please help to solve the problem.

I would be grateful for any help

Answer

To make sure that all elements inside LI affected it's height we can add last element into LI with style clear:both

Possible solutions:

1) Use CSS with :after selector

.list-group-item a:after{
  content:"";
  font-size: 1px;
  display:block;
  clear:both;
}

2) Extra element. At the end of each li you can add

<div style="clear:both;"></div>

Something like:

<li id="cat-id-5" class="cat-parent-empty list-group-item">
    <div class="item-icon-container">
        <span class="badge">1</span>
        <i class="fa expand-indicator fa-chevron-down"></i>
    </div>
    <a href="http://crosp.net/category/technology/" title="View all posts in Technology">
        <i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
        &nbsp; Technology
    </a>
    <div style="clear:both;"></div>
</li>

CSS style looks better. Extra element has better compatibility.