¿Es posible hacer un div 50px menos del 100% en CSS3?

Question

¿Es posible hacer un div 50px menos del 100% en CSS puro? Quiero que <div> sea solo 50px menos que 100%. No quiero ningún JavaScript.

Answer 1

Sí, puedes. Sin utilizar el IE expression(), puede hacerlo en CSS3 utilizando calc().

div { 
    width: 100%; 
    width: -webkit-calc(100% - 50px); 
    width: -moz-calc(100% - 50px); 
    width: calc(100% - 50px); 
} 

Demostración: http://jsfiddle.net/thirtydot/Nw3yd/66/

Esto hará que su vida mucho más fácil. Se admite actualmente en los 3 principales navegadores: Firefox, Google Chrome (WebKit), e IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

Answer 2

Un DIV toma automáticamente el ancho de su matriz. Por lo tanto, no es necesario definir ningún width. Normalmente basta con escribir así:

div{ 
    margin-right:50px; 
} 

Marque esta fiddle

Answer 3

Otra alternativa es el posicionamiento absoluto.

div { 
    position: absolute; 
    left: 0; 
    right: 50px; 
} 

fiddle

embargo, la solución de Sandeep es el que debe utilizar normalmente. Solo evite el uso excesivo de float. Esto evita que los elementos llenen naturalmente su contenedor.

Answer 4

Sí podemos hacerlo haciendo

#custom_div{ 
width:100%; 
margin-right:50px; 
} 

Gracias

Answer 5

Mi solución funciona con y sin float: left.

HTML:

<div></div> 

css:

div { 
    height: 20px; 
    background: black; 
    float: left; 
    width: 100%; 
    padding-right: 50px; 
    box-sizing: border-box; 
    background-clip: content-box; 
}​ 

Demo

Compatibilidad:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Answer 6

jsFiddle

Usando la pantalla block y margin. display:block cuando no se combina con un height/width definido intentará llenarlo.

header { 
    width:100%; 
    background:#d0d0d0; 
    height:100%; 
} 
h1 { 
    display:block; 
    border:#000 solid 1px; 
    margin:0 50px 0 0; 
    height:100px; 
} 
<header> 
    <h1></h1> 
</header>