CSS page layout dislocation: CSS width calculation

Article Introduction: CSS page layout is misplaced.

Why Calculate width
The pixel width of the page is calculated to make the CSS page layout neat and compatible. We are familiar with the layout of the structure of the page or use padding, margin layout will calculate the full page width, if not calculated whether the width is too small will appear dislocation problem.

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

left-Right structure width calculation www. <font color="#ff0000">webjx.com</font>

Left 300px

right 100px

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

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

left-Right structure width calculation www. <font color="#ff0000">WEBJX</font>.com

Left 300px

right 100px

We can see from the above figure because the total width of about 20px, so that the left and right structure can not be flat, there appears to the right-hand side down.
This is the problem of dislocation compatibility, generally in practice because we calculate the negligence, the general difference when the small is 1px-2px, so we will not be found, so the elimination of dislocation compatible with the width of the calculation to start.

Example two: There are 1px border instances in the left and right structure
The general left and right structure has a 1px border, and then add some borders when we set the left and right structure, we need to calculate the width of this border and the width of the left and right structure.
Correct example:
CSS and HTML code are as follows:

left-Right structure width calculation www. <font color="#ff0000">webjx.com</font>

Left 300px

right 100px

Because the left and right structure has 1px width at this time each need to subtract about 2 pixels of the border width, so the left is the last 298px, the right-hand side is 98px width

If you don't subtract the border, you'll get a result:

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

CSS width Calculation time Note summary:
Whether it is the left and right structure, the layout of multiple columns or a single div width of the 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 width of the occupied to calculate into the inside, Firmly grasp the sum of each width of the immediately next is less than or equal to the total width, if greater than the total width will appear dislocation compatibility problem. So the general dislocation when we can start from the calculation of width, of course, there are many reasons for dislocation is also a solution to the problem of dislocation compatibility of one of the methods.