css width 100% minus 100px

New way: css calc()

width = 100% - 100px

.calculated-width {
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
}
<div class="well calculated-width">
    this block has <span class="label label-info">calculated width = 100% - 100px</span>
</div>

Old way: nesting hacks

width = 100% - 100px (from left) - 100px (from right)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
 
<div class="container">
	<div class="container2">
		<div class="left-col">
			width = 100px<br>
			left-col
		</div>
		<div class="center-col">
			width = 100% - 100px -100px<br>
			center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col 
			center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col center-col 
		</div>
	</div>
</div>   
<div class="right-col">
	width = 100px<br>
	right-col
</div>
 
</body>
</html>
.right-col {background:#ffa;}
.left-col {background:#faa;}
.center-col {background:#faf;}
 
.container {float:left; width:100%; margin-right:-100px;}
.container2 {margin-right:110px;}
.left-col  {float:left; width:100px; display:inline;}
.center-col {margin-left:110px; }
.right-col {float:right; width:100px;}

6 comments on “css width 100% minus 100px

  1. Pingback: Solution: Div width 100% minus fixed amount of pixels #computers #programming #solution | IT Info

  2. Pingback: Solution: width: 100%-padding? #fix #solution #answer | IT Info

  3. Pingback: Fix: width: 100%-padding? #fix #solution #development | Good Answer

  4. Pingback: How to: Div width 100% minus fixed amount of pixels | SevenNet

  5. Pingback: How to: width: 100%-padding? | SevenNet

Leave a Reply

Your email address will not be published. Required fields are marked *