how to define page size when I resize the browser size

How to set the size of the web page to be scalable depending on the client monitor resolution. When I open my web page with resolution 1680x1050 the page is looking 开发者_如何转开发good, but when I change the monitor resolution to smaller everything is changed on the page. In css and html the size of the components I define in (%).

You probably have fixed paddings and/or margins, which may cause the problem. Example:

<div style="width:25%; padding: 0 12px; float:left;">
    some content
</div>
<div style="width:25%; padding: 0 12px; float:left;">
    some content
</div>

This layout will have its divs side by side till the width of the page drops to near 96px.

Solutions:

1. Use a percentage padding and margin
2. Use the new css3 coolness:

.box-sizing {    
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    -o-box-sizing: border-box;  
    box-sizing: border-box;  
}

As far as I know, there is no straight forward way to do this.

You need to either make your page a fixed size that is small enough to fit most browsers, or you shouldn't make the page a fixed size.