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;
}
If you modify your source order, you can continue using floats but only for the left and right elements:
.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):
/* optional
body {
display: table;
width: 100%;
}*/
.left
{
display: table-cell;
width: 100px;
}
.central
{
display: table-cell;
}
.right
{
display: table-cell;
width: 100px;
}