CODEWITHSUNDEEP
htmlcss
user1261774
user1261774

Reputation: 3695

align two icons underneath each other using css

I have two icons that I want to align underneath each other, one at the top of the div and the other at the bottom of the div.

Here is an image of what I am trying to achieve - so the lightbulb icon is aligned at the top and the circle/cross is aligned to the bottom, one underneath another:

enter image description here

I have tried to get this working, but each attempt fails.

Here is an image of what I currently have:

enter image description here

Here is my HTML code:

<div class="controls {{ control_classes }}">
    <span id="row_{{ field.auto_id }}">{{ field }}</span>
    <span id="row_icons_{{ field.auto_id }}" style="width: 20px;">
        <i id="id_icon_{{ field.auto_id }}" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop"></i>
        <i id="id_icon_reset_{{ field.auto_id }}" class="fa fa-ban blue_color icon_size20 verticalAlignBottom" rel="tooltip" html="true" data-placement="top" title="{% trans 'Clear' %}"></i>
    </span>
    <span id="row_split_{{ field.auto_id }}" class="textAreaSplitContainer"></span>
</div>

Here is my CSS code:

.form-horizontal .controls {
    margin-left: 165px;
}

.verticalAlignTop {
    vertical-align: top;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

.textAreaSplitContainer {
    background-color: #f6f6f6;
    border: 1px solid #d9d9d9;
    display: inline-block;
    height: 200px;
    max-height: 600px;
    max-width: 45%;
    min-height: 100px;
    min-width: 45%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    resize: none;  /* container is resized by resizing the textarea */
    vertical-align: top;
}

Upvotes: 2

Views: 1667

Answers (1)

tao
tao

Reputation: 90068

Giving the reset icon a negative left margin equal to its width should do the trick: 

[id^="id_icon_reset"] { margin-left: -20px; }

This is as much as I can help blindly. If it's not working, I need the problem reproduced in a fiddle/codepen/snippet, with all CSS aplying.

Upvotes: 1

Related Questions