Question

I’m trying to create a “fluid” website and have in my css file:

page-wrap{
    min-width: 780px;
    max-width: 1260px;
    margin: 10px auto;
    }

In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I’m not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?

Answer 1

That’s fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.

#page-wrap
{
    width:780px;
    margin:10px auto;
}

Forget the min/max-width.