Three column layout with 2 fixed col and one fluid


Can you guys/gals help me making a three column layout with the outer columns fixed and the center one fluid?


If I were doing it, I’d begin by hunting down some pre-made layouts and seeing how they were done. Alessandro Fulciniti has a bunch on his site, including one, n13, that is what you’re asking about. A List Apart gave us [URL=“”]“the holy grail” layout. And the SP forum has a [URL=“”]spiffy FAQ on just this topic. Other examples can be found by Googling for the specific layout.

Hi EE, :slight_smile:
So you want a fluid center with fixed sides, I’ve got a few demos that fit that order already.

3-col Min-Max Sticky Footer
3-col Min-Max Content First
3-col Min-Max Basic

If you have any special requirements you will need to explain further.

You can also find many fine examples at Pauls’ Site.

Three Column layouts

Just be aware of the problems with that “holy grail” layout, it uses the same padding/negative-margin equal column method as the the “One true layout”.

Equal-height columns

This technique really comes together when the columns are given equal heights. The method I’m using is adapted wholesale from the One True Layout, so I won’t go over it in detail. To deploy it, simply add the following CSS:
[URL=“”]The problems are documented here at PIE

#block_1, #block_2, #block_3
[COLOR=Red]    padding-bottom: 32767px;
    margin-bottom: -32767px;[/COLOR]
    overflow: hidden;


I bookmarked these links for future ref.

I also found this from Paul’s site:

Thank you all