Conversion formulas and examples for width percent units

Target width/Context width = result (proportional width)

The pixel width of the current element, the pixel width of the parent element of the current element = The percentage width of the current element

For example:

Copy Code code as follows:
<div id=wrapper>
<section></section>
<aside></aside>
</div>

Original CSS:

Copy Code code as follows:
#wrapper {width:1000px;}
header {width:1000px;}
aside {width:220px;float:left;}
section {width:770px;float:right;}

percent width CSS:

Copy Code code as follows:

#wrapper {width:98%;} Specify the perimeter width, the values are arbitrary
header{width:100%;} Set of Formula 1000÷1000 (this 1000 is wrapper width) =1=100%
Aside{width:22%;float:left;} Set of Formula 220÷1000=0.22=22%
Section{width:77%;float:right;} Set of Formula 770÷1000=0.77=77%