Question

I am trying to position a span element with relative positioning (and displayed as inline-block) after a a element with absolute positioning (and displayed as inline-block too). These two elements are in a li element. I succeeded with a bit of javascript, but if there is a css solution, I would really love to know it!

Here is the code I’m trying to “debug” http://jsfiddle.net/eKEEa/1/

Thanks in advance for helping!

Answer 1

I have changed your CSS from relative to positioning to float:left and removed the display:inline-block. Live example: http://jsfiddle.net/eKEEa/4/

ul li{
    list-style: none;
    width: auto;
    height: 45px;
}
ul a{
    float: left;
    height: 30px;
    padding: 10px 10px 5px 10px;
    background: #ffffff;
    color:#000;
}
ul span{
    float: left;
    height: 30px;
    padding: 10px 10px 5px 10px;
    background: #2e8ab8;
    color: #fff;
}