CODEWITHSUNDEEP
htmlcsssidebar
user5292845
user5292845

Reputation:

Sidebar and Content but without content hiding under Sidebar content

I would like a sidebar and a page content area on my page, with the sidebar being fixed and you can scroll the page content. I have got that. What I haven't got is the sidebar div to be independent and have it's own properties, rather than the sidebar div simply being shown above the page content. Any more information just let me know. I'm probably missing something really basic.

I have a sidebar div:

<div id="sidebar">
        <a href="index.html"><img src="images/logo/mdLogo.png"></a>
        <nav>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">PHOTOGRAPHY</a></li>
                <li><a href="#">GRAPHIC DESIGN</a></li>
                <li><a href="#">3D MODELLING</a></li>
            </ul>
        </nav>
</div>

and I have my content div:

<div id="pageContent">
        <!-- Parallax -->
        <div class="parallaxImage1"></div>

        <div class="parallaxContent">
            <h1>A little about me...</h1>
            <p>Information goes here.</p>
        </div>

        <div class="parallaxImage1"></div>
    </div>

and I have the relevant CSS:

/* Sidebar */
#sidebar {
    background-color: #ffffff;
    width: 405px;
    height: 100%;
    padding: 10px;
    float: left;
    position: fixed;
    z-index: 1;
}

/* Page Content */
#pageContent {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #212121;
    position: absolute;
}

The thing is, the page content is filling 100% of the page, which is what I want, (if I remove the sidebar I still have a page content which fills the entire webpage, which I would actually only want to fill about 75% of it, to meet the edge of the sidebar. If I set it to 100% it fills the entire webpage rather than the page content div. If I don't put #pageContent with 100% width, I have to make sure I have enough content to make it stretch the div out over the rest of the page, otherwise it is only a few pixels wide (in other words, the width is entirely dependent on the content inside of it, rather than being a fixed size). I would also prefer to use percentages as this webpage will be response and will resize to the size of the browser.

Thank you!

Upvotes: 0

Views: 1007

Answers (1)

CaptainAmericaIRL
CaptainAmericaIRL

Reputation: 48

I think I have understood what you want and if I have, then this should be your fix:

/* Sidebar */
#sidebar {
    background-color: #ffffff;
    width: 25%;
    height: 100%;
    padding: 10px;
    float: left;
    position: fixed;
    z-index: 1;
}

/* Page Content */
#pageContent {
    display: block;
    height: 100%;
    width: 75%;
    left: 25%;
    background-color: #212121;
    position: absolute;
}

This will make your sidebar take up 25% of the page, and the content take up 75%. we have to add the left: 25% to make the content div position correctly.

Upvotes: 1

Related Questions