css width 100% minus 100px

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

Try to resize the window to test resizing of the blocks:

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

Rating: +1 (from 1 vote)

Leave a Reply Cancel reply