Positionieren eines DIV vor dem vorherigen DIV

Ich bin nicht versiert, wenn es um HTML / CSS geht.

Ich benutze Typepad für mein Blog, und das schränkt mich sehr ein.

Es gibt vier Divs.

<div id="container-inner">

  <div id="nav"></div>
  <div id="pagebody">
    <div id="pagebody-inner">
      <div id="alpha"></div>
      <div id="beta"></div> 
    </div>
  </div>

</div>

Ich brauche "Beta", um rechts auf der Seite rechts von "nav" und vor "alpha" zu erscheinen.

Der Link zur Live-Site ist hier: http://sarajchipps.com/

Ihre Hilfe wird gerne in Anspruch genommen.

Wenn Sie meinen, möchten Sie, dass die Seitenleiste ganz oben auf der Seite angezeigt wird, beginnend über und rechts von der Navigationsleiste, wie folgt ...

... gibt es zwei einfache und einen schwierigeren Weg, der auch andere Vorteile bietet.

1. position: absolute;

Hier ist der sauberste und einfachste Weg:

• In top: 0;, position: absolute;auf das Element , dass der Bedarf an der Spitze der Seite (#beta) sitzen, und ersetzt float: right;mit right: 0;( float: right;wird nicht funktionieren mit , position: absolute;sondern right: 0;wird in diesem Zusammenhang schafft die gleiche Wirkung)
• Haben Sie position: relative;auf einem Element, das die gesamte Seite enthält (auf Ihrer Website, das ist #container-inner), und keine Elemente dazwischen (so müssen Sie es entfernen #pagebody- versucht es und es bricht nichts).

Das top: 0;eines position: absolute;Elements basiert auf dem nächsten übergeordneten Element position: relative;.

2. margin-top: -XXXpx;

Wenn Sie aus irgendeinem Grund position: relative;auf der Div in der Mitte brauchten (ich kann keinen Grund sehen, aber einer könnte auftauchen), gibt es eine andere weniger saubere Alternative.

Die Höhe des Navigations- / Header-Abschnitts ist festgelegt, sodass Sie wissen, um wie viele Pixel Sie die Seitenleiste verschieben möchten. Sie können der Seitenleiste ( #beta) also einfach einen negativen oberen Rand von so vielen Pixeln (wie margin-top: -350px;) geben. Das einzige Problem bei diesem Plan ist, dass Sie diesen Rand oben anpassen müssen, wenn Sie die Höhe der Kopfzeile ändern.

3. Content-First-Layout

Schließlich wäre die beste (aber am wenigsten einfache) Lösung, die HTML-Vorlage zu bearbeiten und das Element #nav im HTML- Code nach unten zu verschieben, sodass es wie die Seitenleiste #beta unter dem Seiteninhalt liegt. Setzen Sie dann einen großen Rand nach oben auf Alpha. Erstellen Sie eine Lücke in der Größe Ihres Überschriftenabschnitts #nav, und erstellen Sie dann sowohl das Element #nav als auch die Seitenleiste #beta position: absolute;und top: 0;(überprüfen Sie position: relative;s wie oben) und stellen Sie sicher, dass #nav genau die richtige Größe hat, um das Loch zu füllen.

Im Allgemeinen ist es besser, wenn nicht-inhaltliche Elemente unterhalb des Hauptinhalts im HTML-Code zu haben. Dies bedeutet, dass Personen mit Screenreadern den interessanten Inhalt, für den sie gekommen sind, vor der Liste der Links hören, wo sie als Nächstes hingehen sollen, und einige Suchmaschinen geben mehr Gewicht zu Begriffen früher im Markup (ich bin mir ziemlich sicher, dass dies immer noch wahr ist).

Weitere Informationen finden Sie in einem einfachen Artikel zu den ersten Layouts von Inhalten. Hier finden Sie ein Beispiel im Zusammenhang mit reaktionsschnellen Designs, die für Mobilgeräte und Desktops geeignet sind .

Absolute Positionierung erledigt das für Sie.
Bitten Sie die Webmasters SE um gründlichere Unterstützung.

Sie könnten etwas CSS implementieren (basierend auf Ihrem Code) - Ich bin nicht 100% sicher, was Sie erreichen wollen (es ist spät hier, also werde ich die Uhr vorerst beschuldigen :)) - Ich bin weder mit Typepad vertraut, aber im Allgemeinen -

Vielleicht bringt Sie das auf den richtigen Weg:

#pagebody-inner {
    display:block;
    width:100%; /* or the size you need it to be in relation to nav */
}
/* This will float your div-elements inside pagebody-inner to the right hand side */
#pagebody-inner div {
    display:block;
    float:right;
}

Diese CSS-Zeilen müssen natürlich in die CSS-Datei für Ihre Site eingefügt werden.

Ich habe den Code auf dieser Site platziert, wenn Sie damit herumspielen möchten - ändern Sie ihn nach Ihren Wünschen :
http://jsfiddle.net/SE4Pr/

Sie können die absolute Positionierung verwenden (denken Sie jedoch daran, das übergeordnete pagebody-innerObjekt relativ zu positionieren, es sei denn, Sie ignorieren den Fluss der Elemente absolut).

Alternativ könnten Sie beide schwimmen alphaund betanach rechts. Oder Sie können einfach die Position von alphaund tauschen betaund nach links schweben oder sie zu Inline-Blöcken machen.

Ich habe gerade Ihre Website überprüft und Sie müssen einige Änderungen vornehmen.

#alpha{
 float:right;
}
#beta{
 float:left;
}

und das Hinzufügen des richtigen Randes zum div kann dazu führen, dass es gut aussieht.