html - positioning an img right to a relative div - html

Question

I have a center div and a simple problem...
I don't know how to place a image right to it relative(!) like this:
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
</div>
<img id="arrow_down" src="img/arrow_down.png">
Here is the code: http://codepen.io/lalaluki/pen/pNNYpZ
Does somebody knows a trick?

Answer 1

You can place something like <span>▾</span> inside your .text_middle element. I used the html symbol code for a downside triangle because you did not provide the image in your pen example. But you can try it with an image or glyphicon instead.
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<span>▾</span>
</div>
See the pen here

Answer 2

.vertical_align{
vertical-align:middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="top_bar">
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
<span class="glyphicon glyphicon-chevron-down vertical_align" ></span>
</div>
</div>
Try this.
Hope this helps.

Answer 3

I would apply float:right to the image:
#arrow_down {
float:right;
}

Answer 4

Need to change your HTML Structure to achieve this quickly. Add image inside '.text-middle' div
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<img id="arrow_down" src="img/arrow_down.png">
</div>
Add vertical align middle to your image
#arrow_down {
vertical-align: middle;}
Hope this will help you