Tristan T Tristan T - 3 months ago 13
HTML Question

icons are too low in bar

I have a simple website (tristantrouwen.com). It has a bar in the top that has 3 icons. 1 of them needs to be left. The other two right. But the two right icons are lower then the left one.

html:

<div class="icon-menu">
<div class="click"><i class="material-icons md-36">menu</i></div>
<div data-toggle="modal" data-target="#loginModal" aria-hidden="true"><i class="material-icons md-36 icons-right">exit_to_app</i></div>
<div data-toggel="modal" data-target="#signUpModal" aria-hidden="true"><i class="material-icons md-36 icons-right">person_add</i></div>
</div>


css:

.icons-right {
float: right;
}


this is the problem:

problem

I would like to hear how I can get those icons a bit higher.

Answer

You need to list the floated divs first:

<div>
    <div class="icons-right">...</div>
    <div class="icons-right">...</div>
    <div>...stuff on the left</div>
</div>

If you put them AFTER the "left" content, they'll float to the right AFTER that "left" div finishes. Putting them first in the DOM will float them to the right of the start of that "left" div, which is its top edge.

Comments