Search code examples
cssliquid-layoutelasticlayoutfluid-layout

CSS: Centered, fluid left, fixed right, source ordered layout with min/max width

The titles says it. I want a 2-column CSS layout that:

  • is centered - the main content is centered on the page
  • has a fixed (pixel) right column width
  • has a fluid left column - uses up all available space minus the right column width
  • is source ordered - the left column content comes before the right column content in the HTML source
  • allows for a minimum width - 760px in my example
  • allows for a maximum width - 1024px in my example

If the window is greater than max width, the content will be centered on the page at the max value. If the window is smaller than max width, the content fills 100% of the page, unless it's smaller than min width which would make the horizontal scrollbar appear.

I'm willing to use some minor javascript to handle the min/max width for browsers which don't support those properties (I'm looking at you IE6), but I'm just as willing to let that part of the layout degrade.

It is drop dead simple with tables. I've looked through literally hundreds of example layouts, and nothing can do all of the things I'm asking, though there are several that come close. The problem seems to be getting a fluid left column and source ordering in the same style. I've found several examples of a fixed left/fluid right (opposite of what I want) with proper source order, or fluid left/fixed right without source ordering, but not both.

I don't care if it uses floats or negative margins, but I'd like to avoid absolute positioning.

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+
Solution

  • I highly recommend checking out The CSS templates at Dynamic Drive. The 5th one down should be what you're looking for (Fluid-Fixed). Just add a max-width and min-width to the main container element and you should be all set.

    FYI, these are really good templates to use as a base for your page layouts. Playing with the CSS is a great way to learn a lot about floats and positioning, and it really helped me out in my early days of web development.