CSS float element wrong position

Hello,

i am having a problem with CSS.

I have three DIVs that should be placed next to each other within a container DIV. However, the middle DIV should stretch out to fill the whole empty space. The left DIV is floatet left, the right DIV is floatet right.

For some reason the right DIV drops to the next line but i fail to see why, since there would be enough space for it (exactly the right space, actually) to be placed there (where it belongs).

I have create a little graphic to illustrate my problem.

I will also add all according source code (HTML & CSS). However, please be aware that the container ("bottom-corners") which contains the three DIVs ("left","mid" and "right") is, in itself, nested in another container.

The correct result this, should be that the two DIV elements on the left and on the right stick to their sides, resulting in those corners (see image). The middle DIV should stretch out to fill all the space that is left with the appropriate color. I am trying to achieve a rounded corner effect here.

Does anybody know how to solve this problem?

/* the html */
	
	<div class="bottom-corners">                        
		<div class="left"></div>
		<div class="mid"></div>
		<div class="right"></div>
	</div>
 
/* the css */
 
.bottom-corners .left {
                                         
	float:					left;
	width:					10px;
	height:					10px;
	background-image:			url('/img/interface/tr_corner_left.gif');
	background-repeat:			no-repeat;
	
}
 
.bottom-corners .mid {
                                         
	height:					10px;
	background-image:			url('/img/interface/tr_flow.gif');
	background-repeat:			repeat-x;
	margin:              			0px 10px;
 
 
}
 
.bottom-corners .right {
                                         
	float:					right;
	width:					10px;
	height:					10px;
	background-image:			url('/img/interface/tr_corner_right.gif');
    background-repeat:				no-repeat;
    
}

Select allOpen in new window

problem.jpg