I started out from this sample CSS template that provides a sticky footer with a centered 3 column faux layout. The 2 side columns are fixed width and the main content is supposed to be shrink wrapped to fit the size of its content, but instead is stretching to the max-width value defined in the CSS for the wrapper. The main content is stretching out because the CSS doesn’t contain any styles which cause shrink wrapping (i.e. “display:inline“, “display:inline-block“, “float:left“, “display:table“, “display:inline-table“, etc…). And lastly, the wrapper contains everything except the sticky footer.
I tried setting the wrapper with display:table to shrink wrap the main content, which it did, but now the footer which is outside the wrapper div, has incorrect width. It was previously matching its width the same way the wrapper was by defaulting to the max-width style it had set which matched the same max-width sytle on the wrapper. I’m no CSS expert, but also tried moving the sticky footer inside the wrapper using an alternate sticky footer technique, but then I had colliding CSS styles required for the faux columns with the styles required for having a sticky footer inside the wrapper. I don’t know maybe it can be done that way, but from my initial “quick” test, it got messy.
I would prefer not to size it with javascript and instead get it working with CSS if that’s possible. Any ideas with CSS?
And here’s a fiddle of it without adding the “display:table” to the wrapper CSS. Add that and then the problems begin.
What you need is this: Perfect 3 column It will also resize as you want it with the broswer.