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;}

web-profile

css width 100% minus 100px

New way: css calc()

width = 100% - 100px

Old way: nesting hacks

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

6 comments on “css width 100% minus 100px”

Leave a Reply Cancel reply