CSS need help at "formatting"

Question

If we look at my site, we see that the icon with the like and dislike button is not on its correct place. I want it to be to the right of the text evaluate tekkkz.com and above XX total views. So that's my html:

<div id="bar">
 <span>evaluate<br><a href="../../">tekkkz.com</a></span>
 <a class="icon-small" id="like"></a>
 <a class="icon-small" style="margin: 0 0" id="dislike"></a>
 <br>
 <span id="views"></span>
</div>

And here some CSS:

.icon-small {
 display: block;
 position: absolute;
 height: 32px;
 width: 32px;
 text-indent: -9999em;
 margin: 0 0.5em;
}
#bar span {
 float: none;
 padding: 0 0.2em;
 vertical-align: middle;
}
#bar {
 right: 70px;
 top: 1em;
 position: absolute;
 font-size: 0.7em;
}

So what is wrong?

Answer 1

I rewrote the HTML. Not all the changes are necessary to solve your issue, but I think it's better practice to makes your elements divs as opposed to spans with <br />. A hard-coded break like this makes it more complicated to control line breaks using CSS. I also found it easier to group your like/dislike buttons in one div.

<div id="bar">
 <div class="evaluate">evaluate<br><a href="../../">tekkkz.com</a></div>
 <div class="likeButtons">
 <a class="icon-small" id="like"></a>
 <a class="icon-small" style="margin: 0 0" id="dislike"></a>
 </div>
 <div id="views"></div>
</div>

Then for the CSS I used inline-block to put the necessary elements side by side.

.evaluate, .likeButtons { /* this is new */
 display: inline-block;
}
.icon-small {
 display: inline-block; /* was block before */
 /*position: absolute; <-- remove this */
 height: 32px;
 width: 32px;
 text-indent: -9999em;
 margin: 0 0.5em;
}
/*#bar span {
 float: none;
 padding: 0 0.2em;
 vertical-align: middle;
}
^ I don't think you need this any more,
maybe the padding but I'm sure you can work that out yourself */
#bar { /* didn't touch this */
 right: 70px;
 top: 1em;
 position: absolute;
 font-size: 0.7em;
}

• Martin Fischer: Fantastic work. So much time for my problem, writing so much fixes! Very good!

Answer 2

You're positioning the icons absolutely, but not defining where they go (top, bottom, left, right) in the parent, which is also positioned absolutely.

You're probably going to need to define a top value for them both, then individually define a left or right value.

I would strongly recommend restructuring the html and use floats instead to accomplish what you want. Using absolute positioning can be a pain and very buggy.

• Martin Fischer: absolute is necessary cause it should be a little bar between background and text in the padding of the box
• Jonathan Eltgroth: Then you're going to need to use the positioning params to get what you want.

Answer 3

Remove position: absolute; seems to work