[RESOLVED] Centering my page with min and max widths

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. :thumb:

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?

How about you put a table of 1 row 3 columns. You set the width of left and right cells to 50px fixed and table width to 100%, and your site content in the center cell. Just a thought... not sure whether it will work or not, but you could give it a try at least.

I've been avoiding tables, I thought you should use div's nowadays..? That is basically what I need though yes, except I'd rather use div's if that's possible at all.

In the meantime I found an intermediate solution, simply setting the width of the page to 90% (or whatever seems appropriate). It works for most widths (well, the margins aren't exactly 50px but that doesn't matter, as long as there is a relatively large margin), except when the minimum width is reached, then the margin is completely gone again.

Code:

---

<table width=100&#37;>
    <td style="width:50px">&nbsp;</td>
    <td>
        ...your site content goes here...
    </td>
    <td style="width:50px">&nbsp;</td>
</table>

---

Quote:

---

Originally Posted by NickThissen

I've been avoiding tables, I thought you should use div's nowadays..?

---

Why avoid them? :ehh:
Both serve different purposes.

Well I don't know much about web design, but I keep reading that you should avoid tables to layout your site. I am not avoiding them perse, and I am infact using them to display tabular data.

First result on google, for example, gives me this, which seems to suggest that you should indeed avoid tables:
http://webdesign.about.com/od/layout/a/aa111102a.htm

How valid articles like that are... I've no idea.

Quote:

---

Originally Posted by NickThissen

Well I don't know much about web design, but I keep reading that you should avoid tables to layout your site. I am not avoiding them perse, and I am infact using them to display tabular data.

First result on google, for example, gives me this, which seems to suggest that you should indeed avoid tables:
http://webdesign.about.com/od/layout/a/aa111102a.htm

How valid articles like that are... I've no idea.

---

As a general rule of thumb, I tend to stay away from using tables, and instead, use CSS to control the layout of my page. The argument between using Tables or not, is a long one, and as you have already seen, there is a heated debate on the subject, which you will find when you google it.

It terms of creating the required layouts, have a look here:

http://layouts.ironmyers.com/

This should have the layout that you are after, or one very close to it.

Gary

Thanks, that seems helpful, but not for this particular problem. The closest ones I can find all have the same problem that I have now: once resized below their minimum, there is no longer a margin on the left side. They also don't appear to have a max width.

Hey,

Okay, although your description is quite clear, I think a couple pictures would help illustrate the point.

Gary

I did my best :p Image turned out a bit large, sorry.

"Start" at the Normal screen (second one). When you make the screen (black) larger, the page (gray bit) expands but stays centered and keeps fixed margins on both sides. This continues until the page hits its maximum width. Then, the page no longer expands, but it does stay centered. The margins are no longer fixed (but rather "50px + auto" or something, or just auto I suppose).

Going the other way, when you make the screen smaller, eventually the page will reach its minimum width. Then it stops resizing, but the fixed margin on the left should stay. The page will not be 100% visible, that's ok.

http://i55.tinypic.com/yf12a.jpg

EDIT
What I described here and in the picture is what I would like to have, not what I have now. Just to be clear :)

This last part is what I'm having trouble with. The expanding works fine, except that the margins aren't fixed at 50px, but the page is 90% wide. This is ok though, as long as there is a relatively large margin.
However, when the page hits its minimum size, the margin is completely gone. Seems logical, because 90% can no longer be achieved (since the page is wider than the screen), but I would like it to keep the margin anyway... Seems like a normal thing to me, but perhaps it's not... I also think a table would work for this, since then you just have the fixed column on the left, but as I said I'd rather use divs, and I'm sure this must be possible...

For "minimum margins", set the margin styles of the body tag.

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

body
{
    background-color:black;
    margin:0 50px;
    padding:0;
}

.page
{
    margin:0 auto;
    min-width: 800px;
    max-width: 1650px;
    background-color:lime;
}

</style>
</head>
<body>
  <div class="page">
    Hello
  </div>
</body>
</html>

---

Aaah... That's exactly what I needed. Didn't know you could do that, but it makes sense I guess lol. Thanks!

you know that min/max-width won't work with IE6 right?

Yes, don't care :p

I know what you mean :)