Question

I am trying to back three background images in css appear inline

<div id="hd_but2"></div>
<div id="hd_div1"></div>
<div id="hd_but1"></div>

and

#hd_but2 {
background-image:url('1.png');
background-repeat:no-repeat;
height:28px;
width:49px;
margin-top:9px;
}
#hd_div1 {
background-image:url('2.png');
background-repeat:no-repeat;
height:46px;
width:4px;
}
#hd_but1 {
background-image:url('3.png');
background-repeat:no-repeat;
height:28px;
width:29px;
margin-top:9px;
}

But everytime i change the divs to inline it requires content, like text, to show the background images…how can i do this without putting text into the containers…whats a better way to do this?

Answer 1

Use display:inline-block instead of display:inline

Here is jsfiddle http://jsfiddle.net/rmL9s/