Fixed Pixels Page Width

The whole page displays with a fixed width of pixels. It does not consider the resolution of the screen and the browser's display resolution.

A example of this pattern would be http://www.apple.com/support/

 

 

In this case, the user will see the page with the same width of pixels, no matter what the resolution of his browser is.

 

Pros:

1. The user under different kind of resolution will have the same feeling.

2. From implementation point of view, because the outer most container has a fixed width, it is rather easy to calculate the content's position.

 

Cons:

1. If the user's screen is bigger than the width, then there will be margins on left and right, which looks kind of ugly.

2. If the user's screen is smaller than the width, then the user has to resort to the horizone scrool bar to see the full screen, which is kind of inconvenient.

 

Implementation:

The css to control the width:

width: 980px;
margin: 0px auto; /* to let it display in the middle*/

 In http://www.apple.com/support/ , they put the css on the div of header, container, and footer.

 In http://www.sina.com.cn/ , they give a container div with a fixed width, and every thing is in it.

 

Related Patterns:

Full Screen Page Width