html - position relative to fixed position div?

Question

I want the main content to be displayed to the right of the left bar. Whether that's with fixed position or if there's some other way to do it. Doesn't really matter. 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.

<div id="header">HEADER</div>
<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".</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>

#header{font-size:20vw;}
#left_bar{float:left;position:fixed;}
#main_content{overflow:auto;}

http://jsfiddle.net/QLADJ/

Y'know, I've asked a question here before, and got a similar response. Downvoted and answers completely irrelevant to my question. It's really NOT giving me a good impression of this place, I loathe having to ask any of you people anything. If you actually care about the site that you're trying to utilize, you should try to HELP the people on it, not attack them. -.-

Answer 1

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;
}