SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Three column layout with 2 fixed col and one fluid

    Hello,

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

    Thx

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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 "the holy grail" layout. And the SP forum has a spiffy FAQ on just this topic. Other examples can be found by Googling for the specific layout.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi EE,
    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. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:
    The problems are documented here at PIE

    Code:
    #block_1, #block_2, #block_3
        {
        padding-bottom: 32767px;
        margin-bottom: -32767px;
        }
    #wrapper
        {
        overflow: hidden;
        }

  5. #5
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent!

    I bookmarked these links for future ref.

    I also found this from Paul's site:

    http://www.pmob.co.uk/temp/3col-stic...r-min-max2.htm

    Thank you all


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •