CSS seperator using image or plain css?

Question

The separator image isn't displaying on the right side of the input field. I tried using a plain border and with different positioning, as well as with an image as in my example, but it doesn't show.

PS. This is the seperator image:

jsfiddle

.ui-topbanner {
    color:#000;
    height: 31px;
    background-color: #f2e9da;
    border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
    position:absolute;
    top:5px;
    left:4px;
    height:26px;
    line-height:26px;
    padding:0 10px 0 25px;
    display:inline-block;
    color:#000;
    border:1px solid #d9cebc;
    border-bottom:none;
    background-color:#fff;
    font-size:.7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image: url(http://hardist.eu/public/img/icon_folderyellow3.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;

}
.ui-topsubbanner {
    position:relative;
    color:#000;
    height: 30px;
    background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #efe8da;
}
.ui-topsubbanner-wrapper {
    padding:2px 3px 0 5px;
}
.ui-seperator {
    width:2px;
    height:17px;
    display:inline-block;
    background-image: url(../images/ui-seperator.png);
    background-position: 0 6px;
    background-repeat: no-repeat;
}

<div class="ui-topbanner"><div class="ui-topbanner-title">Test</div></div>
<div class="ui-topsubbanner">

<div class="ui-topsubbanner-wrapper">
    <input type="text" class="input-search" placeholder="Search...">
</div>
<div class="ui-seperator"></div>

</div>

Answer 1

The image is actually there, but it's hard to see because it's so similar in color to background and not where you expect. Because the topsubbanner-wrapper div is a block element by default, the separator was getting bumped to the beginning of the next line. I couldn't see it at all until I changed the background of the separator div to red for diagnostic purposes.

You can fix the problem by setting the display of the topsubbanner-wrapper div to inline-block, as you did with the separator, or by setting its float to left.

Answer 2

Check setting float property. It may help you.

.ui-topsubbanner-wrapper {
    padding:2px 3px 0 5px;
    float: left;
}
.ui-seperator {
    width:2px;
    height:17px;
    display:inline-block;
    background-image: url(http://i.imgur.com/ovVm6fW.png);
    background-position: 0 6px;
    background-repeat: no-repeat;
    float: left;
}