Question

I am trying to display 2 arrow links side by side but am getting some css errors.

My html code is below:

 <div>
    <a href="javascript:void(0);" id="move_down"> <span class="down_arrow">&nbsp;</span> </a>
    <a href="javascript:void(0);" id="move_up">  <span class="up_arrow">&nbsp;</span></a>
    </div>

CSS:

.down_arrow{
display:block;
background: url(../images/down_arrow.png) no-repeat left center;
}

.up_arrow{
display:block;
background: url(../images/up_arrow.png) no-repeat left center;
}

Currently, the images are displayed one below another. I want then to be displayed side by side.
However if i remove the display:block; in the css, the image is not displayed properly.

I also tried removing the display:block and put float:left for both classes but still not working.

I would be grateful if someone could provide me with a solution.

Many many thanks.

Answer 1

To make the images float you have to specify a width of the element and set the float property. The CSS must look like this

.down_arrow{
display:block;
background: url(../images/down_arrow.png) no-repeat left center;
float:left;
width:100px;
}

.up_arrow{
display:block;
background: url(../images/up_arrow.png) no-repeat left center;
float:left;
width:100px;
}

See http://jsfiddle.net/fq3Eg/ for your example, I adjusted the CSS and it works.