Round corner div problem in IE7

Question

I am using following structure.

    <div style="background:#000 url(images/heading/bg.gif) repeat-x 0 0; height:28px; color:#FFF;">
    <div style="float:left; width:4px; background: #000 url(images/heading/left_curve.gif) no-repeat 0 left; height:28px;"></div>
    <span style="margin: 0 4px;">asdkjhkhasf</span>
    <div style="float:right; width:4px; background: #000 url(images/heading/right_curve.gif) no-repeat 0 right; height:28px;"></div>
    </div>
</div>    

In IE7, the right curve image(last div) is breaking to next line...

Please help me to resolve this issue.

Answer 1

Swap the span and the right-floated div, so that the div comes first.

Answer 2

try add "float:left" to your span