How do you make a div only extend in one direction when the outer container size increases?

Question

I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents to remain the same and stay in the middle of the outer page.

To illustrate my idea, here are the before and after images, with black representing the outer page, blue the page container, pink the leftnav, and green the rest of the container. Here is also the general structure of the code I am writing. The jsfiddle link includes some css for detail.

<div id="page">
<div id="container">
    <div id="leftCol">
        LEFT
    </div>
    <div id="rightCol">
        RIGHT
    </div>
</div>

https://jsfiddle.net/6L1zrj6e/1/

Currently, my container has a fixed width and automatic margins so as to center it. Is what I am trying to achieve even possible with the current layout? Would I need to move the leftnav div outside of the container?

Answer 1

Here's a pure css solution: fiddle

This is a trick I learned here: here where you have to put the float first, then make the div respect it by creating a new block formatting context, then the div will expand to the remaining space. Throw in a couple min/max widths to conform it and a wrapper with min/max widths as well and it falls into place. The html background makes the body background not extend past the body as it normally would. Another little trick.

    <div class="wrap">
        <main></main>
        <nav></nav>
    </div>

    html {
        background: white;
    }
    body {
        background: purple;
        padding: 0;
        margin: 0;
    }
    .wrap {
        margin: 0 auto;
        max-width: 1080px;
        min-width: 920px;
    }
    nav {
        overflow: auto; /* force a new context to respect float */
        background: red;
        height: 300px;
        min-width: 200px;
        max-width: 360px;
    }
    main {
        float: right;
        background: green;
        height: 300px;
        width: 720px;
    }

Answer 2

You can try the following: Full screen example

jsFiddle

HTML: (Took leftCol out of container)

<div id="page">
    <div id="leftCol">
            LEFT
        </div>
    <div id="container">       
        <div id="rightCol">
            RIGHT
        </div>
    </div>
</div>

JS: (Update the width on page resize and on load)

$(window).on('resize', function(){
    var containerWidth = 980;
    var pageWidth = $(window).width();

    var tempW = Math.max(0, pageWidth-containerWidth) / 2;
    tempW  += 200;
    var w = Math.min(tempW, 360); // 360 = max width
    var l = Math.max(0, tempW - w);
    $('#leftCol').css({'width': w+'px', 'left': l+'px'});
}).resize();

CSS: (Removed floats, using absolute position for leftCol)

#page{
    background-color: purple;
    position:relative;
}
#container {
    background-color: blue;
    width: 980px;
    height: 300px;
    margin: 0 auto;
}
#leftCol {
    position:absolute;
    top: 0;
    left: 0;
    background-color: red;
    height: 300px;
    width: 200px;
}
#rightCol {
    padding-left:200px;
    background-color: green;
    height: 300px;
    width: auto;
}

Answer 3

This is what I think you're after - forgive me if I'm wrong!

EDIT: Added outer container wrapper for right margin:

Updated HTML:

<div id="page">
    <div id="outercontainer">
    <div id="container">
        <div id="leftCol">
            LEFT
        </div>
        <div id="rightCol">
            RIGHT
        </div>
    </div>
    </div>
</div>

And the CSS:

#page{
    background-color: purple;
    height: 300px;
}
#outercontainer {
    margin: 0 5% 0 0;
}
#container {
    background-color: blue;
    height: 300px;
    margin: 0 auto;
    min-width: 300px;
    max-width: 600px;
    position: relative;
}
#leftCol {
    background-color: red;
    height: 300px;
    margin-right: 200px;
}
#rightCol {
    position: absolute;
    background-color: green;
    width: 200px;
    top: 0;
    right: 0;
    bottom: 0;
}

This gives the #container a min and max width, and the margins will show beyond the max. These are set quite small to show up well in JSFiddle.

leftCol will expand to fit the available space, and it's right-margin prevents it overflowing the rightCol.

rightCol is absolutely positioned (within #container) in the leftCol's margin.

JSFiddle here: https://jsfiddle.net/xuew6og5/1/

The #outerwrapper allows a visible right margin, until the page gets to minimum width at least. If you want the margins to be balanced, change its margin to 0 5%

Update: New JS Fiddle with right margin: https://jsfiddle.net/xuew6og5/2/

Update 3: Sorry, I missed your requirement for a max-width of 360px on the leftCol. Updated the CSS above, and a fiddle here: https://jsfiddle.net/xuew6og5/4/

Answer 4

In order to achieve the wanted effect you need to move the leftCol outside of your container and give your rightCol a margin-left with the size of your leftCol.

Also add a min-width and max-width to your lefCol and a width using calc to adjust it's width to your goals.

Note: lefCol width is calculated like this:

100% / 2 - (Container width / 2 - leftCol min-width)

So your altered html looks like this:

<div id="page">
    <div id="leftCol">
        LEFT
    </div>
    <div id="container">
        <div id="rightCol">
            RIGHT
        </div>
    </div>
</div>

Your new CSS looks like this:

#page{
    background-color: purple;
}
#container {
    background-color: blue;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
#leftCol {
    float: left;
    background-color: red;
    height: 300px;
    min-width:100px;
    width:calc(100%/2 - 50px);
    max-width:200px;
}
#rightCol {
    margin-left:100px;
    background-color: green;
    height: 300px;
    width: 200px;
}

Take a look at the updated example:

https://jsfiddle.net/xxyv7nwf/2/

Answer 5

CSS solution using CSS3 calc. Edited. According to OP updates.

@media screen and (min-width: 1600px)  {
            #container{
                margin:0 auto;          
          }

        }
        body {
            overflow-x:hidden;
        }
        #page{
            background-color: purple;
            height:300px;

        }
        #container{
            background-color: blue;
            min-width:980px;
            max-width: 1140px;

        }

        #leftCol {
            float: left;
            background-color: red;
            height: 300px;
            width: calc(100% - 780px);
        }
        #rightCol {
            float: left;
            background-color: green;
            height: 300px;
            width: 780px;
        }

HTML

        <div id="page">
        <div id="container">
            <div id="leftCol">
                LEFT
            </div>
            <div id="rightCol">
                RIGHT
            </div>
        </div>
    </div>