css width 100% minus 100px

New way: css calc()

width = 100% - 100px

css:


.calculated-width {

    width: -moz-calc(100% - 100px);

    width: -webkit-calc(100% - 100px);

    width: calc(100% - 100px);

}

html:


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

css:


.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 thoughts on “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 thoughts on “css width 100% minus 100px”

Leave a Reply to Tom Cancel reply