✔ Div rechts neben mittig platziertem Div

[Sasser]

Div am rechten Browserrand fixieren

Guten Abend!

Ich habe ein DIV mittig auf der Seite platziert:

#wrapper {
        background-color: #FFFFFF;
        border: 1px solid #000000;
        left: 50%;
        margin-left: -350px;
        position: absolute;
        width: 700px;
}

Nun möchte ich gern am rechten Browserrand ein DIV fixieren.

Hintergrund dieser Aktion ist, dass ich in dieses dann einen Banner 160x600 Pixel einbauen möchte, welcher dann immer im Blickfeld des Users ist.

 

[hela]

Hallo,

das ist m.E. keine gute Idee eine Webseite horizontal zu zentrieren. Diese Seite hier ist auf die gleiche Weise zentriert, wie du es vorhast und wenn du dir diese Seite mal in einem Fenster ansiehst, das weniger als 1024px breit ist, dann merkst du, dass beim Scrollen der linke Seitenrand nicht mehr erreicht werden kann.

Besser wäre folgendes:

• Für moderne Browser setzt man die linke und rechte äußere Auspolsterung (margin) des WRAPPER-Blockes auf den Wert "auto".
• Ältere Browser (inkl. IE6 im Quirksmode) reagieren leider nicht auf diese "Auto-Margin-Zentrierung". Hier kann man aber mit der Eigenschaft "text-align:center" im BODY-Element eine horizontale Zentrierung des DIV-Blockes erreichen. Da diese Eigenschaft vererbt wird, muss man sie also im WRAPPER-Block am besten durch "text-align:left" wieder zurücknehmen.

 body {text-align: center;}
#wrapper {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

Um dein eigentliches Problem zu lösen würde ich den WRAPPER-Block um 160px breiter machen und dort ein mehrspaltiges Layout einfügen, wo du dein Vertikalbanner in der rechten Spalte unterbringen kannst.

Falls im WRAPPER-Block absolut positionierte Elemente enthalten sind, dann müsstest du ihn mit der Eigenschaft "position:relativ" versehen.

 

[Maik]

Hi,

eine weitere Möglichkeit neben helas genannten Techniken bzgl. der horizontalen Zentrierung wäre http://d-graff.de/fricca/center.html, wo der obere und linke Boxenbereich nicht aus dem Viewport geschoben wird, wenn er die festgelegte Boxendimension unterschreitet.

Ansonsten schließe ich mich voll und ganz helas Vorschlag an, den Banner im DIV #wrapper unterzubringen, damit es zu keinen unschönen Überlagerungen der beiden DIV-Blöcke kommt, wenn die Browserfensterbreite zu klein skaliert ist, um darin beide Blöcke vollständig einsehen zu können.

mfg Maik

 

[Sasser]

Dankeschön, es funktioniert