Search code examples
csspositioningtumblrsidebar

Avoid sidebar overlapping content on tumblr with CSS positioning

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.

Solution

  • According to your latest comment, this should help your problem:

    You could just set a min-width on your page, rearrange your markup a little, and remove some styles on the sidebar. If you leave everything like it is now, then the following will help:

    1. Set min-width: 1250px; on your body tag
    2. Move the sidebar element to before the page element
    3. Remove position: fixed; from the sidebar element

    This will prevent the menu from overlapping the page content and will add a horizontal scrollbar to the page when the user's window is less than 1250px. If you want to support a smaller min-width or if you have a problem with the background image becoming not centered at small resolutions, then minor modifications will be necessary.