Dynamically Adjusting Two Outside Columns To The Variable Width Of The Center Column

I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want

Solution 1:

The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.

HTML:

<div id="wrap">
    <div id="left">
        Left
    </div>
    <div id="center">
        center
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS:

#wrap
{
    width: 1000px;
    display: table;
}

#wrapdiv
{
    display: table-cell;
    border: 1px solid #000;
    width: auto;
}

#center
{
    padding: 030px;
    text-align: center;
}

You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)

I think this is as close as you're going to get with pure CSS.

Solution 2:

Good 'ole tables to the rescue:

http://jsfiddle.net/hgwdT/

Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:

http://jsfiddle.net/XXXdB/

The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.

I also confirmed that this solution works in IE8 and FF, in addition to Chrome.

Solution 3:

This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!

Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):

HTML:

<divid="wrapper"><divclass="side"></div><divid="middle">One line of text.</div><divclass="side"></div></div>

CSS:

#wrapper {
    margin: 0 auto;
    width: 1000px;    
}

#wrapperdiv {
    float: left;   
    height: 300px;
}

.side {
    background: #ddd;   
}

#middle {
    background: #eee;  
    padding: 030px;
    text-align: center;
}

JavaScript:

var adjustSize = function(){
    // Declare varsvar wrapper = $('#wrapper'),
        middle = $('#middle'),
        totalWidth = wrapper.width(),
        middleWidth = middle.width(),
        middleOuterWidth = middle.outerWidth(),
        remainingWidth = totalWidth - middleOuterWidth,
        sideWidth;

    if(remainingWidth % 2 === 0){
        // Remaining width is even, divide by two
        sideWidth = remainingWidth/2;
    } else {
        // Remaining width is odd, add 1 to middle to prevent a half pixel
        middle.width(middleWidth+1);
        sideWidth = (remainingWidth-1)/2;  
    }

    // Adjust the side width
    $('.side').width(sideWidth);
}