Three column layout with 2 fixed col and one fluid

HTML & CSS
1

Hello,

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

Thx

2

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=“http://www.alistapart.com/articles/holygrail”]“the holy grail” layout. And the SP forum has a [URL=“http://www.sitepoint.com/forums/showthread.php?t=143801”]spiffy FAQ on just this topic. Other examples can be found by Googling for the specific layout.

3

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
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

4

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=“http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems”]The problems are documented here at PIE

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

Excellent!

I bookmarked these links for future ref.

I also found this from Paul’s site:

http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm

Thank you all