html - サイドバーがウェブサイト全体を押し下げる

Question

それで、ヘッダー、本文フッターなど、すべてが完璧に並んだこのウェブサイトを手に入れました。先週、サイドバーを追加しようとしましたが、メインコンテンツが押し下げられていることに気付きました。多くの質問は、サイドバーの余白/高さをメイン コンテンツから独立させるにはどうすればよいですか? （CSSコードを以下に掲載）

デモ: 編集: http://oldtimesdaily.tumblr.com/ 私の tumblr とコード。今の様子。絶対位置が機能し、メインコンテンツがトップに戻りました。しかし、サイドバーのすべてのコンテンツが詰まっています。絶対位置を指定すると、すべてのマージンが削除されますか? サイドバーにさまざまなコンテンツを配置するには、代わりに何を使用すればよいですか?

#quote { /*style for quote division*/
    position:relative;
    width:375px;
    height:70px;
    border:1px solid black;
    font-family:sans-serif;
    font-size:95%;
    padding:3px;
    background-color:lightyellow;
}
#auth { /*style for quote author, if any*/
    position:absolute;
    bottom:3px;
    right:10px;
}
#sidebar {           /*editable*/
    background: url('http://s10.postimg.org/uag5u79d1/vline.png') repeat-y left center;
    background-color: white;
    width: 260px;
    position: relative;
    top: 700px;
    left: 55%;
}
#sidebar .sTitle {
    padding: 0 0 10px 0;
    position: relative;
    margin: 0px 20px 0px;
    color: #222;
    font-size: 15px;
    line-height: 1;
    font-family: QuicksandBold, Helvetica, Arial, sans-serif;
    font-weight: bold;
    letter-spacing: 3px;
    text-decoration: none;
    border-bottom: 0px;
}
#sidebar .Categories {
    font-size: 11px;
    text-align: center;
    padding: 3px 5px;
    margin: 50px;
}