CSS Float wehrt sich

[jameshoward]

Hallo,

ich habe ein Problem mit CSS. Ich möchte drei DIVs nebeneinanderlegen und zwar so, das das erste ganz links liegt, das dritte ganz rechts und das zweite in der Mitte. Das zweite soll außerdem die volle übrige Länge ausfüllen.

Ich habe bereits einige funktionierende Lösungen hierfür gefunden, allerdings sind sie alle davon abhängig, das man entweder eine fixe Breite verwendet, oder aber 100% der Seitenbreite. Beides ist bei mir nicht der Fall.

Das Problem ist, das das besagte, rechts angeordnete dritte DIV eine Zeile nach unten springt, obwohl in der eigentlichen Zeile (da entsprechend berechnet) genügend Platz vorhanden ist, um es dort darzustellen.

Ich habe eine kleine Grafik erstellt, die das Problem illustrieren soll (ich denke so ist es verständlicher):

Hier noch der zugehörige Code:

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

  
  
.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;  
  
}  
  

Ich würde mich sehr freuen, wenn mir hier jemand helfen könne. Ich bin bereits am Verzweifeln!