CODEWITHSUNDEEP
css
tanya
tanya

Reputation: 2985

display images side by side

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.

Upvotes: 1

Views: 1820

Answers (2)

wdm
wdm

Reputation: 7189

You can actually remove the SPAN tags and do something like this...

Demo: http://jsfiddle.net/wdm954/juGME/1

Demo 2: (with arrow images): http://jsfiddle.net/wdm954/juGME/2/

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

CSS...

#move_down, #move_up {
    float: left; 
}
.down_arrow, .up_arrow {
    width: 50px;
    height: 50px;
    background-color: #ccc;
}
.down_arrow {
    background-image: url(path/to/img);
}
.up_arrow {
    background-image: url(path/to/img);
}

Upvotes: 1

grundprinzip
grundprinzip

Reputation: 2491

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.

Upvotes: 3

Related Questions