Centered 2 column layout with fixed width AND percentage wid

[yanwhite]

I need to create a centered 2 column layout using a combination of fixed width AND percentage width (and also using min and max width for the body or container).

The body/container min/max width will be 770 to 970 pixels wide.
The right column is 360 pixels wide.
The left column should be stretching to fit the remaining width.

I searched around and found a couple of solutions, but none that approached satisfying all of the above needs.

Can anyone help?

[mikes]

In essence, what you want is:

.columnRight { width: 360px; }
.columnLeft { width: 100%-360px; }

Obviously, that’s not valid but that’s what it boils down to. (I wish they’d add that!)

The question has come up here and on other forums and everyone that I’ve seen respond claims that there is no css that will accomplish that. You need to set both columns to either a percentage or a fixed value.

One work-around that occurs to me though is to set a reasonable fixed value in css and then use js or jquery to detect the user’s screen size and resize based on that. You would then have the flexibility to establish a body/container size, subtract 360px from that and assign it to the left column. I’m not a js/jquery wiz but I would think it would be fairly simple. One problem though is it will most likely cause a FOUC.

EDIT: It seems to me that you should be able to set the left column to 100% and then float a 360px sidebar to the right inside it. That should accomplish the same effect. Set the height on the sidebar to 100% and the text won’t even wrap around the bottom underneath it.

[Cotton]

Quote:

It seems to me that you should be able to set the left column to 100% and then float a 360px sidebar to the right inside it. That should accomplish the same effect. Set the height on the sidebar to 100% and the text won’t even wrap around the bottom underneath it.

Sounds like a decent plan to me. The variable width of the wrapper could prove to be a pain thanks to our friend Internet Explorer.

[mikes]

The problem with that solution, or any solution that involves min-width/max-width if you want it to work on IE, is that it requires a css expression. A css expression gets evaluated continually, causing unnecessary cpu usage.

Quote:

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

From: http://developer.yahoo.com/performance/rules.html#css_expressions

[Author]

Posts