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;  
}

Vinicius Lima · Answer 1 · 2013-04-30T13:56:21.537

1

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.

edited Apr 30 '13 at 13:56

answered Apr 30 '13 at 13:43

Vinicius Lima

534
7
20

The OP wants the central column to be a fluid width, not fixed. – cimmanon Apr 30 '13 at 13:48
Try to replace central width of 100px to 100%. It worked here. – Vinicius Lima Apr 30 '13 at 13:51
Because I have a border in each div I've used: width: 100%; margin-left: 100px; margin-right: 100px; for the central div Thanks – willygroup Apr 30 '13 at 13:58
@willygroup Wait, how does that make sense? My solution has right/left margins, but you accepted this answer which does not? – cimmanon Apr 30 '13 at 15:42
@cimmanon probably I didn't see your answer (It was posted a bunch of minutes before mine). :) – willygroup May 24 '13 at 13:51

Toon Casteele · Answer 2 · 2013-04-30T13:37:27.420

0

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.

edited Apr 30 '13 at 13:37

answered Apr 30 '13 at 13:19

Toon Casteele

2,479
15
25

Absolute positioning does not play nicely with content where the size is unknown. – cimmanon Apr 30 '13 at 13:35
It does in his case if he wants fixed width on the two outer divs. And as I said before. He can size the wrapper around the 3 divs any way he likes. – Toon Casteele Apr 30 '13 at 13:37
Only the width is known here, not the height. What happens when the contents are taller than the viewport? It gets cut off. – cimmanon Apr 30 '13 at 13:38
Again... It doesn't if you wrap it with a relative positioned div with whatever height you like. You can even scroll them if you like... You're completely free to modify to your choosing. – Toon Casteele Apr 30 '13 at 13:40

cimmanon · Accepted Answer · 2013-04-30T13:51:28.037

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;  
}

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

3 Answers3