Home > Developer > Web Develop
CSS page dislocation div css width calculation
DIV CSS Width calculation css page layout dislocation (body sense music)
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 the left and right add up should be less than 400px, then we may be 300px on the left and 100px (body sense music)
Correct code:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> left and right structure width calculation www.divcss5.com</title>
<style type= "Text/css" >
. yangshi{width:400px;}
. zuo{float:left; width:300px; background: #CCC;}
. you{float:right; width:100px; background: #999}
</style>
<body>
<div class= "Yangshi" > (Body Sense Music)
<div class= "Zuo" > Left 300px</div>
<div class= "You" > right 100px</div>
</div>
</body>
CSS width calculation of Web page dislocation
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:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> left and right structure width calculation www.divcss5.com</title>
<style type= "Text/css" >
. yangshi{width:400px;}
. zuo{float:left; width:300px; background: #CCC;}
. you{float:right; width:120px; background: #999} (Body music)
</style>
<body>
<div class= "Yangshi" >
<div class= "Zuo" > Left 300px</div>
<div class= "You" > right 100px</div>
</div>
</body>
DIV CSS Layout Dislocation diagnostics
Instance effect
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:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> left and right structure width calculation www.divcss5.com</title>
<style type= "Text/css" >
. yangshi{width:400px;}
. zuo{float:left; width:298px; border:1px solid #F00; background: #CCC;}
. you{float:right; width:98px; background: #999; border:1px solid #F00;}
</style>
<body>
<div class= "Yangshi" >
<div class= "Zuo" > Left 300px</div>
<div class= "You" > right 100px</div>
</div>
</body>
Result diagram:
CSS layout dislocation style diagram
Width setting
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 Page Layout Dislocation change demo diagram
Div+css Page Layout Dislocation change demo diagram
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 Note The summary:
Whether it is the left and right structure, multi-column layout or a separate 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, At this time we all need to set their occupied width in the calculation, firmly grasp the width of the same row and less than or equal to the total width, if greater than the total width will be misaligned 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
