前のDIVの前にDIVを配置する

HTML / CSSに関しては私は精通していません。

私はブログにTypepadを使用していますが、それによって多くのことが制限されます。

4つのdivがあります。

<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>

ページの右側、「nav」の右側、「alpha」の前に「beta」を表示する必要があります。

ライブサイトへのリンクはこちらです：http：//sarajchipps.com/

あなたの助けは大歓迎です。

つまり、サイドバーをページの最上部に配置し、ナビゲーションバーの上から右に向かって、次のようにします。

... 2つの簡単な方法と、他の利点をもたらすもう1つの難しい方法があります。

1。 position: absolute;

これが最も簡単な方法です。

• 追加top: 0;、position: absolute;ニーズがページ（#beta）の最上部に座って、そして交換することを要素にfloat: right;してright: 0;（float: right;動作しませんposition: absolute;が、right: 0;このコンテキストで同じ効果を作成します）
• 持っていませんposition: relative;（だあなたのサイト上で、ページ全体を含む要素の上に#container-inner）、との間には要素（あなたからそれを削除する必要があるので、#pagebody-それを試してみましたが、それが何かを破壊しません）。

要素のtop: 0;は、を持つ最も近い親にposition: absolute;基づきます。position: relative;

2。 margin-top: -XXXpx;

なんらかの理由でposition: relative;真ん中のdivで必要になった場合（理由はわかりませんが、発生する可能性があります）、別のあまりクリーンでない代替手段があります。

ナビゲーション/ヘッダーセクションの高さは固定されているので、サイドバーを上に移動したいピクセル数がわかります。したがって、サイドバー（#beta）にその数のピクセルの負の上マージン（のようにmargin-top: -350px;）を与えることができます。この計画の唯一の問題は、ヘッダーの高さを変更する場合、そのマージントップを調整する必要があることです。

3.コンテンツ優先レイアウト

最後に、最良の（しかし、最も単純ではない）ソリューションは、HTMLテンプレートを編集し、＃nav要素をhtmlの下に移動して、＃betaサイドバーのようにページコンテンツの下に配置し、次にアルファに大きなマージントップを配置することです。見出し#navセクションのサイズのギャップを作成し、＃nav要素と#betaサイドバーの両方を作成position: absolute;しtop: 0;（position: relative;上記のようにsをチェック）、穴を埋めるのに#navが正確に適切なサイズであることを確認します。

HTMLのメインコンテンツの下にコンテンツ以外の要素を配置するほうが一般的には適切です。つまり、スクリーンリーダーを使用している人は、次に進むべきリンクのリストの前に、興味のあるコンテンツを聞いて、一部の検索エンジンは重要度が高くなります。マークアップの早い段階での用語に（これはまだ真実だと確信しています）。

詳しくは、コンテンツファーストレイアウトに関する簡単な記事をご覧ください。モバイルとデスクトップで機能する「レスポンシブ」デザインのコンテキストでの例を示します。

絶対配置はそれを行います。ウェブマスターSEにもっと詳しいサポートを
依頼してみてください。

（コードに基づいて）CSSを実装できます-達成しようとしていることは100％わかりません（ここでは遅れているので、今のところ時計のせいにします:)）-タイプパッドにも慣れていません。しかし、一般的には-

おそらくこれはあなたを正しい軌道に乗せることができます：

#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;
}

もちろん、これらのcss行をサイトのcssファイルに追加する必要があります。

あなたがそれをいじくり回したいなら、私はこのサイトにコードを置きます-あなたが望むように修正してください：http :
//jsfiddle.net/SE4Pr/

あなたは可能性が絶対位置を使用します（しかし、比較的親位置することを忘れないでくださいpagebody-innerあなたは絶対に要素の流れを無視している場合を除き、オブジェクトを）。

または、両方alphaをbeta右にフロートさせることもできます。それとも、ただの位置を入れ替えることができますalphaし、betaフロートは、左またはそれらのインラインブロックします。

私はあなたのサイトをチェックアウトしたばかりで、いくつかの変更を加える必要があります。

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

divに正しいマージンを追加すると、見栄えがよくなります。