Footer with 3 columns, right and left fixed, center fluid maximized

Question

I would obtain a 3 column footer with fixed width left and right column and the central fill the remaining space:

.
.
.
|[LEFT]<------central------>[RIGHT]|

Now I'm using this code, but the central column has fixed width :(

.left  
{  
  float:left;  
  width: 100px;  
}  
.central  
{  
  float:left;  
  width: {xxx}px  
}  
.right  
{  
  float:right;  
  width: 100px;  
}  

Answer 1

If you modify your source order, you can continue using floats but only for the left and right elements:

http://tinker.io/99f07/2

.left  
{  
  float:left;  
  width: 100px;  
}  
.central  
{  
    margin-left: 100px;
    margin-right: 100px;
}  
.right  
{  
  float:right;  
  width: 100px;  
}  

<div class="left">
    Left
</div>

<div class="right">
    Right
</div>

<div class="central">
    Lorem ipsum dolor...
</div>

Otherwise, changing the display type of all 3 sibling elements to table-cell will do the job (as an added benefit, the elements are now equal height):

http://tinker.io/99f07/1

/* optional
body {
    display: table;
    width: 100%;
}*/

.left  
{  
  display: table-cell;  
  width: 100px;  
}  
.central  
{  
  display: table-cell;  
}  
.right  
{  
  display: table-cell;  
  width: 100px;  
}

Answer 2

Try to do this:

CSS:

.left  
{  
  float:left;  
  width: 100px;
}  
.central  
{
  width: 100%;
  margin: 0 auto;   
}  
.right  
{  
  float: right;    
  width: 100px;
}

and your HTML must be in this order (left, right and central) to work:

<div class="left">test</div>    
<div class="right">test</div>
<div class="central">test</div>

I wrote "test" just to see the results. =)

Hugs, Vin.

Answer 3

http://jsfiddle.net/qtzKk/

Use absolute positioning and the left and right attributes if you want a fixed width for your left and right hand divs.

You can wrap it with a relative positioned div so it's not overlapped by your site content.