Hi,

I want my webpage to be centered in the browser, but at the same time also have a minimum and maximum width.

I know I can center the page (well, the div element really) by setting the margin-left and margin-right CSS properties to auto. This works just fine and the page is centered, with room to spare on both the left and right side.

But, if your monitor is wide, this space is wasted, and I want the page to expand in that case. So instead of using 'auto' for the margin-left and margin-right properties, I used a fixed margin of 50px on both sides. Now, the site expands and shrinks with the browser nicely, and it is still centered.

However, I don't want the site to become too small, otherwise elements start overlapping. So, I set the min-width property in the CSS to 800px. This still works fine. I can resize the browser and the page shrinks, until it hits 800px then it simply stays in place.

The relevant CSS at this time is:
Code:
.page
{
    margin: 10px 50px 10px 50px;
    min-width: 800px;
}

A new problem now occurs when the browser window is too large. In that case the contents of the site are all on the left side, and the right side of the page (the page mainly consists of a grid) is empty. So what I want now is to also set a maximum width. I tried doing that by simply setting the max-width property in the CSS (to 1650px):

Code:
.page
{
    margin: 10px 50px 10px 50px;
    min-width: 800px;
    max-width: 1650px;
}
This doesn't work the way I want though. While it doesn't expand the site further than 1650px, the site is no longer centered when the browser window is larger than that. The margin is kept fixed at 50px on the left, but it grows on the right side (because the page cannot grow any further).

So, I thought I could set the margins back to auto:
Code:
.page
{
    margin: 10px auto 10px auto;
    min-width: 800px;
    max-width: 1650px;
}
While the page is large enough, this works just fine, the page is centered. However, if I now shrink the window again, so that the width of the page is below the max-width, there is no longer a margin on the left and right sides! The page just sits right against the browser edge...


What I basically need is a way to set the margin to auto, but with a minimum margin of 50px. Is that possible?