How can I stack two arrow images (upvote/downvote) on top of eachother using CSS?

Answer 1

By default, <div> elements are block-level meaning they are one-per-line and will expand horizontally to fill their container.

Adding the click handling is another problem. You could include the <a> and <img> elements in the uparrow and downarrow elements or you do it in CSS as you suggested (the less compatible way). Another option is registering DOM events with Javascript.

HTML:

<div class="vote">  
<div class="uparrow" />  
<div class="downarrow" />  
</div>

CSS:

div.vote {
  width: 50px;
  float: left;
}

div.uparrow {
  background-image: url(...);
}

div.downarrow {
  background-image: url(...);
}

Answer 2

Use 2 divs. Float the text div left and put the two images in a single div. use display: block on the images to force one below the other.

Answer 3

A more semantic and efficient solution than divs would be this, which also takes care of positioning the vote box.

.content-item {padding-left:110px;position:relative; width:500px;border:1px solid red;}
.vote{width:100px;position:absolute; top:0; left:0;border:1px solid red;}
.vote h4 {style heading how you like}
.vote img{width:100px;height:30px;background:black;}

<div class="content-item"> content 
    <div class="vote">
    <h4>Vote</h4> 
    <img alt="vote up" src="..." />
    <img alt="vote down" src="..." />
    </div>
</div>

Answer 4

Don't use divs for an image - there's already a perfectly good img tag!

<div class="vote">
 <img alt="^" title="vote up"   src="/images/up.arrow.png" />
 <img alt="v" title="vote down" src="/images/down.arrow.png" />
</div>

And then simply:

.vote
{
 width: 15px;
 float: left; clear: left;
}

.vote img
{
 display: block;
 float: none; clear: both;
}

You may want to add some margin to the .vote to separate it from the content it will be next to.