[CSS] Nerviges Problem mit Positionierung

**Xardas der Dunkle** · 06.10.2010 22:18

Geht auch viel einfacher, funktioniert vor allem in jedem Browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title></title>
        <style type="text/css">
/* <![CDATA[ */
#content {
    width:          90%;
    position:       relative;
}

#content_left {
    position:       absolute;
    top:            0;
    left:           0;
    right:          200px; /* !!!! Hier ist der Knackpunkt, das div benötigt eine Positions-Angabe von beiden Seiten !!! */
    border:         1px solid #000;
}

#content_right {
    position:       absolute;
    top:            0;
    right:          0;
    width:          198px;
    border:         1px solid #000;
}
/* ]]> */
        </style>
    </head>
    <body>
        <div id="content">
            <div id="content_left">Hallo Welt</div>
            <div id="content_right">Test</div>
        </div>
    </body>
</html>

**Ranmaru** · 06.10.2010 22:26

Interessant, danke. An absolute innerhalb von relative habe ich nicht gedacht. Wobei das Argument, daß es so in allen Browsern funktioniert, relativ nebensächlich ist. Das Design ist für 'n privates Projekt und ich hab sowieso schon heftig HTML5 und CSS3 benutzt (hsla()-Farben ftw ^^), da macht's dann die flexbox auch nicht mehr aus.

**Bluescreen** · 13.10.2010 13:09

Du kannst auch einfach im die beiden nebeneinander liegenden Boxen (Rot) position:static lassen (Standard).
Dann in der linken Box (Blau) float:left; und in der rechten Box (Grün) clear:right;. Dann kannst du diese Box per margin-left neben die linke Box schieben.
Auch dabei bleibt der Elementfluss um die rote Box erhalten.

Kompatibel zu allen gängigen Browsern (auch IE6).

**dead_orc** · 15.10.2010 13:07

Zitat von Bluescreen

Du kannst auch einfach im die beiden nebeneinander liegenden Boxen (Rot) position:static lassen (Standard).
Dann in der linken Box (Blau) float:left; und in der rechten Box (Grün) clear:right;. Dann kannst du diese Box per margin-left neben die linke Box schieben.
Auch dabei bleibt der Elementfluss um die rote Box erhalten.

Kompatibel zu allen gängigen Browsern (auch IE6).

Ich glaube, du hast das Ziel genau umgedreht: Es sollte gerade KEIN Textfluss um die rote Box stattfinden, sondern stattdessen darunter Leerraum sein. Außerdem bringt clear:right; genau gar nichts, wenn vorher kein Element mit float:right; aufgetaucht ist.

**DFYX** · 16.10.2010 17:15

Uhm, ich weiß jetzt nicht, ob ich das Problem missverstanden hab, aber eigentlich sollte es reichen, A ein margin-right: 200px zu verpassen und den Rest zu lassen, wie er ist.

Thema: [CSS] Nerviges Problem mit Positionierung

Themen-Optionen

Anzeige

Hybrid-Darstellung

Stichworte

Berechtigungen