Help with CSS positioning.

Answer 1

The problem is you are setting the width to 92% of its container then adding 52px of padding onto that. That is making the layout something like this:

|26px| LEVEL 1 |
|    |   92%   |

|  52px  | LEVEL 2 |
|        |   92%   |

As the icons are aligned to the right, they are now offset as the right edge is further across. I would recommend not setting the width of the div and instead using margins to align them, something like this:

|26px| LEVEL 1 |
|    |         |

| 52px  | LVL2 |
|       |      |

As a tip for debugging these sorts of issue, put borders on everything of different colours. This would probably have made what is happening more obvious as you would "see" it.

Answer 2

you could do this a easy way.

<div class="commentcontainer">
......
<div class="updown">....</div>
......
</div>

style :

.commentcontainer{position:relative;}
.commentcontainer .updown {position:absolute; top:20px; right:20px;}

this should work. sorry i used other classes and stuff.. the main ideea is: put position:relative; in the css of the commentbox and put position:absolute; top:20px; right:20px; in the css of the up/down vote this should put your up/down vote img`s in the same spot in all comments.

Or if this does not work you should check the width of the commentbox`s if it has a defined value.. try to put : width:100%; Hope it helps

Answer 3

Tested in FF3

#talkbacks .show
{   
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#F3F3F3 none repeat scroll 0 0;
  border-bottom:1px solid #B6C7C7;
  border-top:1px solid #B6C7C7;
  font-size:12px;
  overflow:hidden;
  padding:11px 10px;
  position:relative;
  width:439px;
}

div.votes
{
  float:none !important;
  position:absolute;
  right:20px;
}