Horizontally Aligning Divs With Fixed And Dynamic Width

I am trying to set up the following div blocks so that the left div nd the right div are of fixed width and the centre div dynamically expands as needed. The right div floats to ri

Solution 1:

You can do it really simple, use float:right and float:left flor side divs and separate the middle one using margin-right. Please put attention that the left and right divs order is important in this solution. Your example here: http://jsfiddle.net/jtorrescr/gAwv2/1/

HTML:

<div id="top">TOP</div>
<div id='leftbar'></div>
<div id='rightbar'></div>
<div id='center'></div>
<div id='clearbothbar'></div>
<div id="bottom">BOTTOM</div>

css:

#top, #bottom
{
    background-color:green;
}
#container
{
    overflow:hidden;
}
#rightbar
{
    float:right;
    width:162px;
    background-color:pink;
    height:300px;
}
#leftbar
{
    float:left;  
    width:162px;
    background-color:orange;
    height:300px;
}
#center
{
    margin-right:162px; 
    background-color:blue;
    height:300px;

}

#clearbothbar
{
    clear:both;
}

Solution 2:

Will need a bit more fiddling around, but just generally you can change the left and right div to position:absolute and then put the center div in the middle with margin-left and margin-right as the width of the left and right div.

<style>html, body {margin:0;padding:0;}
    div {border: solid black 1px; min-height: 50px;}
    #leftbar{
    position:absolute;
    left:0;
    width:162px;
    display: inline-block;
    }
    #center{
    margin: 0163px;
    width: auto;
    display: block;
    }
    #rightbar{
    position:absolute;
    right:0;
    width:162px;
    display: inline-block;
    margin-top: -52px;
    }
    #clearbothbar{clear:both;height:0;min-height:0;border:none;}
</style><divid='top'>top</div><divid='leftbar'>left</div><divid='center'>center</div><divid='rightbar'>right</div><divid='clearbothbar'></div><divid='bottom'>bottom</div>