Let's say I have a 3-column layout where the middle column has a fixed width while the left and right columns occupy the rest of the page.
Before going into detail, let me summarize... I'd like my middle column to be a percent width so it grows with the browser window. But as soon as its width reaches X pixels, it'll stay like that.
Here's the "problem": Let's say a user opens a browser window in a normal size (not maximized) at 900px, then it will display 3 images, which is correct. But when he maximizes the window to 1440px, it'll still display 3 images when it should be 4 images/row. If he makes the window smaller (to 700px). It'll still be displaying 3 images when it should be 2. Here I want to add a % width.
On the other hand it can't be completely float because if a user has one of those huge screens with 2000+px, then it'll show all the images in one row. And I don't want that either.
I hope my explanation makes sense.
Thanks for the help.
My preference would be to set a max-width on the whole page, so that at the point where you don't want the central column to grow any more, the outer columns will stop growing as well. Otherwise (a) it's more difficult to code, and (b) you might otherwise end up with a design that looks out of kilter at large screen sizes, where the sidebars become wider than the main column.
You can set max-width and min-width on the column. Is that what you are after?
Yeah but how to have columns on each side always fill the remaining side space? Something like ErikJ's "float: center" code still wouldn't really get wrapping working correctly.