[Solved] position relative to fixed position div? [closed]

by


Here’s a Working Fiddle Tested on: IE10, IE9, IE8, FF, Chrome, Safari

notice: although I’m using absolute positioning, this layout is completely responsive. (resize your browser to see it in action)

this solution still has a downside: the left menu width and the main content width are fixed. (I’ll try to remedy that and update my answer)

HTML:

<div id="Site">
    <div id="header">HEADER</div>
    <div id="content">
        <div id="left_bar">Left Bar of Wonderfulness</div>
        <div id="main_content">
            <p>I want this content to be displayed right around <b>here</b>. So it doesn't scroll behind "Left Bar of Wonderfulness". Though, I don't want to use absolute positioning because I need my page to automatically format itself based on the size of the viewport. Also, the Left Bar isn't going to be a fixed width anyway. That'll be dependant on a number of things and may change multiple times during the same session. So absolute positioning is out of the question.</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
    </div>
</div>

CSS:

*
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

#Site
{
    height: 100%;
}
    #Site:before
    {
        content: '';
        height: 100%;
        float: left;
    }

#header
{
    text-align: center;
    font-size: 10vw;
}
#content
{
    background-color: azure;
    position: relative;
}
    #content:after
    {
        content: '';
        display: block;
        clear: both;
    }
#left_bar
{
    width: 30%;
}
#main_content
{
    position: absolute;
    height: 100%;
    width: 70%;
    top: 0;
    right: 0;
    background-color: red;
    overflow: auto;
}

Update: your question was not so clear, but I think that I understood it correctly now.
Here is the Updated Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari

the trick is to double the left menu content, one of them (the fake) – is hidden, but its there to take ‘space’, the real one is fixed.

HTML:

<div id="Header">HEADER</div>
<div id="LeftMenuContainer">
    <div id="RealLeftMenu">Your left menu content</div>
    <div id="FakeLeftMenu">Your left menu content</div>
</div>
<div id="MainContent">
    Your content
</div>

CSS:

*
{
    padding: 0;
    margin: 0;
}

#Header
{
    text-align: center;
    font-size: 5em;
}
#LeftMenuContainer
{
    display: table-cell;
    white-space: nowrap;
}

#MainContent
{
    display: table-cell;
    background-color: red;
}

#FakeLeftMenu
{
    visibility: hidden;
}
#RealLeftMenu
{
    position: fixed;
    background-color: blanchedalmond;
}

3

solved position relative to fixed position div? [closed]