0

I'm having problems avoiding my sidebar to overlap the main content of my blog on tumblr. I am using a premade template on tumblr which i have modified. The only ways I can position my sidebar in the top right corner, is by using an absolute or fixed position:

#sidebar{
position:fixed;
top:20px;
right:20px;
}

When using e.g. relative, the sidebar position itself in the bottom after my main content.

My page is built up like this:

<body>
    <div id="page">

        <div id="header">
        </div>
        <div id="content">
        </div>

    </div>

    <div id="sidebar">
    </div>

</body>

Click here to see the page. I tried putting my sidebar inside the page div, but there's a constraint on the width, which I would like to keep. Thank you in advance.

4

1 回答 1

0

根据您的最新评论，这应该可以帮助您解决问题：

你可以在页面上设置一个最小宽度，重新排列你的标记，然后删除侧边栏上的一些样式。如果您保持现在的一切，那么以下内容将有所帮助：

  1. 设置min-width: 1250px;在您的body标签上
  2. 将元素移动到元素sidebar之前page
  3. position: fixed;从sidebar元素中移除

这将防止菜单与页面内容重叠，并在用户窗口小于 1250px 时向页面添加水平滚动条。如果您想支持更小的最小宽度，或者如果您遇到背景图像在小分辨率下不居中的问题，则需要进行少量修改。

于 2013-05-14T21:39:51.740 回答