3 divs layout having the middle one fluid

Question

How to achieve the following with CSS?

--------------------------------------------------
|  DIV 1: 50px  |  DIV 2: FLUID  |  DIV 3: 50px  |
--------------------------------------------------

I don't have an issue with a 2 columns layout having the right div fluid, but i can't figure out how to make the above.

Demo: http://jsfiddle.net/SKsmJ/

Answer 1

<div style="float:right;width:50px;"></div>
<div style="float:left;width:50px;"></div>
<div style="margin:0 55px;"></div>

Answer 2

It's not the nicest solution, but you could use nested divs, set the main div's width to whatever you want for your page's width and position the other two with float .

HTML:

<div id="main">
    <div id="left">left</div>
    <div id="right">right</div>
    main
</div>

CSS:

div {
    display: block;
}
#main {
    width: 100%;
}
#left, #right {
    width: 50px;
}
#left {
    float: left;
}
#right {
    float: right;
}

Here's a working example: http://jsfiddle.net/davehauser/6qVwR/

Answer 3

All you have to do is to float both the right and left div, making sure you're right div is the first in the HTML.

I edited the jsfiddle you provided : http://jsfiddle.net/AsKGL/

Answer 4

You just need to float: left all div s, specifying width:50px for the first and last div .

Here's a super basic jsFiddle: http://jsfiddle.net/Simo990/V3PtW/1