CSS Float refuses to do its job

[jameshoward]

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.

http://www.dreamtailor.net/prv/problem.jpg

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;

}

[Fang]

/* the html */

<div class="bottom-corners">
<div class="left"></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 {

height: 10px;
background-image: url('/img/interface/tr_flow.gif');
background-repeat: repeat-x;


}

.bottom-corners .right {

float: right;
width: 10px;
height: 10px;
background-image: url('/img/interface/tr_corner_right.gif');
background-repeat: no-repeat;

}

[jameshoward]

Thank you!

I would have done exactly that, but the corners are transparent on the outside, which means that if i stretch the tr_flow background over the whole area, the whole corner effect will be lost, rather disturbed.

[Fang]

/* the html */

<div class="bottom-corners">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>

/* the css */

.bottom-corners {position:relative;}

.bottom-corners .left {

position:absolute; left:0;top:0;
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 {

position:absolute; right:0;top:0;
width: 10px;
height: 10px;
background-image: url('/img/interface/tr_corner_right.gif');
background-repeat: no-repeat;

}