CROSP CROSP - 1 year ago 51
HTML Question

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

I am trying to style a little bit my menu.

I am using

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

Please help to solve the problem.

I would be grateful for any help

Answer Source

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{
  font-size: 1px;

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>
    <a href="" title="View all posts in Technology">
        <i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
        &nbsp; Technology
    <div style="clear:both;"></div>

CSS style looks better. Extra element has better compatibility.