sidebar position:fixed moving with main content..? (code & images included)

achenn · 03-09-2012, 01:24 AM

I'm designing a blog/portfolio with three sections- header/nav is on the far left, the main content is in the vertical center, and the sidebar is on the far right. My intention is to have the header/nav in a fixed position on the left, and the sidebar in a fixed position on the right, with the main content scrolling through the vertical center.
I noticed that when I began work on the portfolio page(again, aligned with the vertical center), thus removing the main content, the sidebar moved from it's supposedly fixed position to the far left near the header/nav.
I'm having a hard time finding exactly what's causing this and I don't quite know how to ensure that the sidebar with stay to the far right regardless of what is (or isn't) in the center.

Code:

<body>
    <header>
        <logo>
            <a href="#"><img src="img/logo.png" alt="whskytngfxtrt logo" height="139" width="158" /></a>
        </logo><!-- end logo -->
        <nav>
            <ul>
                <li id="blog"><a href="#">BLOG</a></li>
                <li id="work"><a href="#">WORK</a></li>
                <li id="about"><a href="#">ABOUT</a></li>
                <li id="contact"><a href="#">CONTACT</a></li>
            </ul>
        </nav><!-- end nav -->
    </header><!-- end header -->

    <work>
        <category>
            <ul>
                <h1>Web</h1>

                <h1>Print</h1>

                <h1>Identity</h1>
            </ul>

    <sidebar>
        <dictionary>
            <h3><b>hwis-kee tang-goh foks-trot</b></h3>
            <h4><p><i>noun</i> 1. the best damn creative studio there ever was</p></h4>
        </dictionary><!-- end dictionary -->

        <twitter>
            <h3>@whskytngfxtrt</h3>
            <h4><ul>
                <li><a href="#">sometimes i just really love the internet</a></li>
                <li><a href="#">sometimes i just really love the internet</a></li>
                <li><a href="#">sometimes i just really love the internet</a></li>
            </ul></h4>
        </twitter><!-- end twitter -->

header {
    background: none;
    float: left;
    margin-top: 123px;
    margin-left: 22px;
    position: fixed;
    width: 158px;
}
main {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}
work {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}
sidebar {
    border-top: 1px solid #202020;
    padding-top: 25px;
    float: right;
    margin-left: 153px;
    margin-top: 295px;
    position: fixed;
    width: 158px;
}
sidebar dictionary {
    position: fixed;
}

sidebar twitter {
    list-style-type: none;
    position: fixed;
}

Sammy12 · 03-09-2012, 05:04 AM

Hey there achenn,

You will have a better chance of getting an answer, if you post a live link to your website. This type of positioning problem is easily fixed with a simple inspect element.

achenn · 03-09-2012, 12:54 PM

http://achenn.site90.net/

for whatever reason, the logo isn't showing up on my end, perhaps you can see it? either way, the rightside sidebar is supposed to be in a fixed position, level with the leftside nav.

thank you!

Sammy12 · 03-09-2012, 11:07 PM

you have to add:

Code:

sidebar {
    right: 0;
}

on some resolutions, it will be too far to the right. The fix for this is pretty complicated, if the above code isn't what you want, let me know

achenn · 03-10-2012, 12:40 AM

Quote:

Originally Posted by Sammy12

you have to add:

Code:

sidebar {
    right: 0;
}

on some resolutions, it will be too far to the right. The fix for this is pretty complicated, if the above code isn't what you want, let me know

neither adding that in addition to my current code or removing current code and using only that seemed to have any effect..?

Sammy12 · 03-10-2012, 03:00 AM

Code:

sidebar {
   position: fixed;
   right: 0;
}

should push the sidebar to the right and allow it to be fixed, as the main content scrolls