• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Float wehrt sich

Status
Für weitere Antworten geschlossen.
P

peterpan

Neues Mitglied
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):

problem.jpg


Hier noch der zugehörige Code:

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

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

Hilfe wäre sehr hilfreich : )
 
Versuchs mal so (hab's allerdings nicht getest, weil ich die Grafiken nicht habe):

Code: 
.bottom-cornersleft {
        float:                                  left;
        width:                                  10px;
        height:                                 10px;
        background-image:                       url('/img/interface/tr_corner_left.gif');
        background-repeat:                      no-repeat;
}
.bottom-cornersmid {
        height:                                 10px;
        background-image:                       url('/img/interface/tr_flow.gif');
        background-repeat:                      repeat-x;
        margin:                                 0px 10px;
}
.bottom-cornersright {
        float:                                  right;
        width:                                  10px;
        height:                                 10px;
        background-image:                       url('/img/interface/tr_corner_right.gif');
    background-repeat:                          no-repeat;
}

Code: 
<div class="bottom-cornersleft"></div>
<div class="bottom-cornersright"></div>
<div class="bottomcornersmid"></div>

Wichtig ist, dass du die Mitte im HTML-Teil von der Reihenfolge her ans Ende setzt.
 
Wow

Danke! Das ist wirklich spitze! Es funktioniert wirklich einwandfrei, allerdings nur unter Firefox und Opera.

Internet Explorer 6 und 7 quälen sich mal wieder einen ab : )

Internet Explorer 6 zieht das Teil auf die gesamte Browserfensterlänge und Internet Explorer 7 zeigt nur die linke, untere Ecke an, das mittlere und das rechte DIV aber nicht.

Ich verstehe allerdings nicht warum.

Hat jemand einen Vorschlag?
 
Das ist abstrakt schwer zu beurteilen. Ein Link wäre hilfreich.
Möglicherweise fehlt ein qualifizierter Doctype, damit der IE das boxmodell richtig darstellen kann.
Versuch's mal mit dem (hängt natürlich von deinem Code ab) :
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben