我的侧边栏将我的整个网站推倒

时间:2013-06-24 15:03:10

标签: html css sidebar margins

所以我得到了这个网站,所有内容都完美排列,标题,页脚等。过去一周我试图添加一个侧边栏,我意识到它推动了我的主要内容。 很多问题是,如何使我的侧边栏的边距/高度独立于我的主要内容? (在下面发布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;
}

1 个答案:

答案 0 :(得分:1)

position: absolute;

会使侧边栏独立于页面的其余部分