[flobox]

Hallo zusammen,

ich habe ein dreispaltiges CSS Design.

Das Ganze ist auch unter Skihallen in Deutschland: Indoor Ski & Skifahren in Wintersporthallen einsehbar.

Die mittlere Spalte (Contentspalte) kommt dabei im Quelltext zu erst vor.
Die linke und rechte Sidebar im Quelltext erst dannach.

Momentan bekomme ich die rechte Sidebar aber nicht nach rechts. Obwohl sie auch ein float:right; hat.

Kann mir jemand sagen, wo der genaue Fehler steckt?

Ich danke Euch!!!

VG
Florian

[Webcoder]

Hi flobox

dadurch dass der #content vor der #infobar kommt und auch ein float:right; besitzt, wird der nachfolgende Inhalt immer links von ihm positioniert. Eine sofortige Lösung zu dem Problem habe ich leider nicht parat.


Gruß
Webcoder

[mantiz]

OK, folgendes musst du tun (weiß allerdings nicht, ob's in jedem Browser läuft, getestet FF9):

1. du floatest die linke und mittlere Spalte links, rechte Spalte rechts
2. du gibst der mittleren Spalte einen margin-left in der Breite der linken Spalte (also Platz machen für die linke Spalte)
3. dadurch wird alles nach rechts geschoben
4. dann vergibst du einen negativen margin-right von 100% (evtl. 99% probieren, wenn 100% nicht funzt, ich glaube das ging nicht in jedem Browser mit 100%)

Die Angabe des negativen Margin bewirkt, dass sich die nachfolgende (linke) Spalte über den Content-Bereich schieben kann.

Hier der CSS-Code, den ich im Firebug getestet hab:

#content {
    color: #022131;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-left: 190px;
    margin-right: -100%;
    text-align: justify;
    width: 540px;
}

Anmerkungen:
Wenn du floatest, dann ist das Element automatisch ein Block-Element, display:inline bringt also gar nichts. position:relative habe ich ebenfalls rausgenommen, weil ich den Nutzen nicht erkennen konnte.

[flobox]

Zitat von mantiz

OK, folgendes musst du tun (weiß allerdings nicht, ob's in jedem Browser läuft, getestet FF9):

1. du floatest die linke und mittlere Spalte links, rechte Spalte rechts
2. du gibst der mittleren Spalte einen margin-left in der Breite der linken Spalte (also Platz machen für die linke Spalte)
3. dadurch wird alles nach rechts geschoben
4. dann vergibst du einen negativen margin-right von 100% (evtl. 99% probieren, wenn 100% nicht funzt, ich glaube das ging nicht in jedem Browser mit 100%)

Die Angabe des negativen Margin bewirkt, dass sich die nachfolgende (linke) Spalte über den Content-Bereich schieben kann.

Hier der CSS-Code, den ich im Firebug getestet hab:

#content {
    color: #022131;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-left: 190px;
    margin-right: -100%;
    text-align: justify;
    width: 540px;
}

Anmerkungen:
Wenn du floatest, dann ist das Element automatisch ein Block-Element, display:inline bringt also gar nichts. position:relative habe ich ebenfalls rausgenommen, weil ich den Nutzen nicht erkennen konnte.

hat perfekt funktioniert!!

vielen, vielen danke!!