Est-il possible de faire un div 50px inférieur à 100% en CSS3?

Est-il possible de faire un div 50px inférieur à 100% en CSS pur? Je veux que le

soit seulement 50px moins que 100%. Je ne veux pas de JavaScript.

Oui, vous pouvez. Sans utiliser l’ expression() de IE, vous pouvez le faire dans CSS3 en utilisant calc() .

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

Démo: http://jsfiddle.net/thirtydot/Nw3yd/66/

Cela rendra votre vie beaucoup plus facile. Il est actuellement pris en charge dans les trois principaux navigateurs: Firefox, Google Chrome (WebKit) et IE9: http://caniuse.com/calc

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

Une DIV prend automatiquement la largeur de son parent. Il n’est donc pas nécessaire de définir une width . Normalement, il faudrait simplement écrire comme ceci:

 div{ margin-right:50px; } 

Vérifiez ce violon

Une autre alternative est le positionnement absolu.

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

violon

Mais la solution de Sandeep est celle que vous devriez normalement utiliser. Evitez simplement de trop utiliser le float . Cela empêche les éléments de remplir naturellement leur conteneur.

Ma solution fonctionne avec et sans float: left .

HTML:

 

css:

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

Démo

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

jsfiddle

Utilisation du block affichage et de la margin . display:block lorsqu’il n’est pas combiné avec une height / width définie essaiera de remplir son parent.

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

Oui on peut le faire en faisant

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

Merci