We would like to know how to use calc() in css3 to calculate width.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!-- w w w. j av a2s . c om-->
height: 100%;
}
#left, #right {
width: -moz-calc(50% - 20px);
width: -webkit-calc(50% - 20px);
width: calc(50% - 20px);
float: left;
background-color: #FEE;
height: 100%;
}
#middle {
width: 40px;
float: left;
background-color: gray;
height: 100%;
}
</style>
</head>
<body>
<div id="left">Hello</div>
<div id="middle"></div>
<div id="right">World!</div>
</body>
</html>
The code above is rendered as follows: