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

Question

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|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+

Answer 1

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.

Answer 2

Are you looking for something like this? ( negative margins + floats + proper source order + fixed right )

http://blog.html.it/layoutgala/LayoutGala23.html

More layouts at the index page: http://blog.html.it/layoutgala/

And then just append min/max width to the container.

Answer 3

My attempt: http://www.ryankinal.com/fluid/

It doesn't completely work, though that's only because at very small window sizes, my negative margins can cause the content to fall off the page. Here's the theory:

1. container at some percentage
2. left column at 100% of container, and floated left
3. right column wrapped in 0% width, float-right wrapper
4. right column at fixed width (200px in my example)
5. left column and right column left margins of half the width of the right column (100px in my example)

So, the larger the right column, the more likely it is that the content will fall off. But that's as close as I've gotten in a good hour or so. It's also a little hackish due to wrapping the right column in an extraneous div and taking advantage of overflow: visible.

But them's my dukes (for now).