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;}
Thank you this was exactly what I was looking for.
Pingback: Solution: Div width 100% minus fixed amount of pixels #computers #programming #solution | IT Info
Pingback: Solution: width: 100%-padding? #fix #solution #answer | IT Info
Pingback: Fix: width: 100%-padding? #fix #solution #development | Good Answer
Pingback: How to: Div width 100% minus fixed amount of pixels | SevenNet
Pingback: How to: width: 100%-padding? | SevenNet