CODEWITHSUNDEEP
htmlcss
Ballon
Ballon

Reputation: 7204

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 (%).

Upvotes: 0

Views: 712

Answers (2)

Ege Özcan
Ege Özcan

Reputation: 14269

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;  
}

Upvotes: 1

Jonathan Wood
Jonathan Wood

Reputation: 67195

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.

Upvotes: 0

Related Questions