Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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;
    }
    Attached Thumbnails Attached Thumbnails sidebar position:fixed moving with main content..? (code &amp; images included)-perfect.jpg   sidebar position:fixed moving with main content..? (code &amp; images included)-main.jpg   sidebar position:fixed moving with main content..? (code &amp; images included)-work.jpg  

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.


  • #3
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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..?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    sidebar {
       position: fixed;
       right: 0;
    }
    should push the sidebar to the right and allow it to be fixed, as the main content scrolls


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •