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

Question

uparrow.gif and downarrow.gif

So, it would look like so:

How can I create 3 divs and style them with CSS so those arrows are positions with the top arrow above the bottom arrow?

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

Should I create a "vote" div with restricted width? Would I float: top and float: bottom the two arrow divs with the background set as my two images? I plan on having content directly to the right of the vote arrows so it needs to be restricted and tight.

Answer 1

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.

Answer 2

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(...);
}