How can I do width 100 - 100px in CSS

Question

In CSS  how can I do something like this   width  100  - 100px    I guess this is fairly simple but it is a bit hard to find examples showing that

User · Answer

You can try this      x000D   x000D   lt  --First Solution-- gt  x000D  width  calc 100  - 100px   x000D   lt  --Second Solution-- gt  x000D  width  calc 100vh - 100px   x000D   x000D   x000D    vw  viewport width  vh  viewport height

User · Answer

The short answer is you DON T do this in CSS  Internet Explorer has support for something called CSS Expressions  but this isn t standard and is definitely not supported by other browsers like FireFox for instance   You d be better off doing this in JavaScript

User · Answer

CSS can not be used to animation  or any style modification on events   The only way is to use a javascript function  which will return the width of a given element  then  subtract 100px to it  and set the new width size   Assuming you are using jQuery  you could do something like that    oldWidth       yourElem   width        yourElem   width oldWidth-100     And with native javascript   oldWidth   document getElementById  yourElem   clientWidth  document getElementById  yourElem   style width   oldWidth-100  px     We assume that you have a css style set with 100

User · Answer

Setting the body margins to 0  the width of the outer container to 100   and using an inner container with 50px left right margins seems to work    lt style gt  body       margin  0      padding  0      full-width       width  100       innerContainer       margin  0px 50px 0px 50px     lt  style gt    lt body gt     lt div class  full-width  style  background-color   ff0000   gt       lt div class  innerContainer  style  background-color   00ff00   gt        content here      lt  div gt     lt  div gt   lt  body gt

User · Answer

Working with bootstrap panels  I was seeking how to place  delete  link in header panel  which would not be obscured by long neighbour element  And here is the solution   html    lt div class  with-right-link  gt       lt a class  left-link  href     gt Long link header Long link header lt  a gt       lt a class  right-link  href     gt Delete lt  a gt   lt  div gt    css    with-right-link   position  relative  width  275px    a left-link   display  inline-block  margin-right  100px    a right-link   position  absolute  top  0  right  0      Of course you can modify  top  and  right  values  according to your indentations  Source

User · Answer

You can t   You can  however  use margins to effect the same result

User · Answer

Could you do   margin-right  50px  margin-left  50px    Edit   My solution is wrong   The solution posted by Aric TenEyck suggesting using a div with width 100  and then nesting another div using the margins seems more correct

User · Answer

Padding on the outer div will get the desired effect    lt html gt   lt head gt   lt style gt       outer          padding  0 50px          border 1px solid black    for visualization               inner          border 1px solid red    for visualization          lt  style gt   lt  head gt   lt body gt   lt div id  outer  gt       lt div id  inner  gt          100px smaller than outer      lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

There are 2 techniques which can come in handy for this common scenario  Each have their drawbacks but can both be useful at times   box-sizing  border-box includes padding and border width in the width of an item  For example  if you set the width of a div with 20px 20px padding and 1px border to 100px  the actual width would be 142px but with border-box  both padding and margin are inside the 100px    bb      -webkit-box-sizing  border-box     Safari Chrome  other WebKit        -moz-box-sizing  border-box        Firefox  other Gecko        box-sizing  border-box           width  100       height 200px      padding  50px      Here s an excellent article on it  http   css-tricks com box-sizing  and here s a fiddle http   jsfiddle net L3Rvw   And then there s position  absolute   padded      position  absolute      top  50px      right  50px      left  50px      bottom  50px      background-color   aefebc      http   jsfiddle net Mw9CT 1   Neither are perfect of course  box-sizing doesn t exactly fit the question as the element is actually 100  width  rather than 100  - 100px  however a child div would be   And absolute positioning definitely can t be used in every situation  but is usually okay as long as the parent height is set

User · Answer

my code  and it works for IE6    lt style gt   container  margin 0 auto  width 100     header   height 100px  background  9c6  margin-bottom 5px    mainContent   height 500px  margin-bottom 5px    sidebar   float left  width 100px  height 500px  background  cf9    content   margin-left 100px  height 500px  background  ffa     lt  style gt    lt div id  container  gt     lt div id  header  gt header lt  div gt     lt div id  mainContent  gt       lt div id  sidebar  gt left lt  div gt       lt div id  content  gt right 100  - 100px lt  div gt     lt span style  display none  gt  lt  span gt  lt  div gt   lt  div gt

User · Answer

You need to have a container for your content div that you wish to be 100  - 100px   container      width  100     content      margin-right 100px     width 100       lt div id  container  gt     lt div id  content  gt        Your content here    lt  div gt   lt  div gt    You might need to add a clearing div just before the last  lt  div gt  if your content div is overflowing    lt div style  clear both  height 1px  line-height 0  gt  amp nbsp  lt  div gt

User · Answer

Could you nest a div with margin-left  50px  and margin-right  50px  inside a  lt div gt  with width  100

User · Answer

It started to work for me only when I checked all the spaces   So  it didn t work like this  width  calc 100 - 20px  or calc 100 -20px  and perfectly worked with width  calc 100  - 20px

User · Answer

Are you using standards mode  This solution depends on it I think   If you re trying to make 2 columns you could do something like this    lt div id  outer  gt       lt div id  left  gt          sidebar      lt  div gt       lt div id  main  gt          lorem ispsum etc          lt  div gt   lt  div gt    Then use CSS to style it   div outer       width 100       height  500px     div left       width  100px      height  100       float left      background  green     div main      width  auto     margin-left  100px     same as div left width       height  100      background red      If you don t want 2 columns you can probably remove  lt div id  left  gt

User · Answer

This works   margin-right 100px  width auto

User · Answer

You can look into using LESS  which is a JavaScript file that pre-processes your CSS so you can include logic and variables into your CSS  So for your example  in LESS you would write width  100  - 100px  to achieve exactly what you wanted

User · Answer

Modern browsers now support the   width  calc 100  - 100px     To see the list of supported browser versions checkout  Can I use calc   as CSS unit value   There is a jQuery fallback  css width  calc 100  -100px   alternative using jquery

User · Answer

lt div style  width  200px  border  1px solid red   gt       lt br gt       lt div style  margin  0px 50px 0px 50px  border  1px solid blue   gt           lt br gt       lt  div gt       lt br gt   lt  div gt

[html] How can I do width = 100% - 100px in CSS?

Examples related to html

Examples related to css