CSS page layout dislocation: CSS width calculation

Why Calculate width
The Web pixel width is calculated to be neat and compatible with the CSS page layout. The common layout of the left and right structure of the page or use padding, margin layout will calculate the full width of the page, if not calculated whether the width is too high or small will appear dislocation problem.

How to calculate CSS width
Example one: We calculate the layout style of a left and right structure.
If the total width is 400px, then add up should be less than 400px, then we may be 300px on the left, 100px on the right
Correct code:

 
  Left and right structure width calculation www.webjx.comLeft 300px right 100px

The total width of the left and right structure is exactly equal to 400px

Error:
If we are in the total width of the case, the left is 300px, and the right is 120px that the total width of more than 20px, we see what will happen, the DIV+CSS code is as follows:

 
  Left and right structure width calculation www.webjx.comLeft 300px right 100px

We can see that because the total width of about 20px, so that the left and right structure can not be flat, and then appear to go down.
In this way, there is a mismatch of compatibility problems, generally in practice because we calculate the negligence, the general difference between the time is 1px-2px, so we will not be found, so the elimination of dislocation compatibility can be calculated from the width of the beginning.

Example two: 1px frame instance in left and right structure
In general, there is a 1px border in the structure, and then with some borders when we set the left and right structure, we need to calculate the width of this border with the width of the structure.
Correct examples:
CSS and HTML code are as follows:

 
  Left and right structure width calculation www.webjx.comLeft 300px right 100px

Since the left and right structures have a width of 1px, this time each need to subtract about 2 pixels of the border width, so the left is the last 298px, the width of 98px on the

If you do not subtract the border, it will result in:

Div+css Setting percent width calculation
Sometimes we also need to use percentages to calculate the width, usually the total percent width, not more than 100%

CSS width calculation When the note summary:
Whether it is the left and right structure, multi-column layout or a single div width layout settings need to pay attention to the width of the grasp and calculation, especially the use of padding, margin, border and other CSS properties, this time we need to set their occupied width in the calculation, Firmly grasp the same row of the width of the sum of less than or equal to the total width, if greater than the total width will appear dislocation compatibility issues. So the general dislocation when we can start from the calculation of the width, of course, there are many reasons dislocation is also one of the ways to solve the problem of dislocation compatibility.

