View Full Version : Problems with CSS float

10-28-2008, 08:21 AM

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?

(Please note: i can not use fixed width on this container. I can not use 100% or any percentage width either)


/* the html */

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


Any help would be appreciated! Thanks!

10-28-2008, 08:30 AM
Could you post a link to your page(or a sample page)?