CSS width subtraction
Now with calc the solution will be :
width: calc(100% - 10px);
Calc
can be use with Addition, Subtraction, Multiplication, Division.
Additional note :
Note: The + and - operators must always be surrounded by whitespace.
The operand of calc(50% -8px) for instance will be parsed as a
percentage followed by a negative length, an invalid expression, while
the operand of calc(50% - 8px) is a percentage followed by a minus
sign and a length. Even further, calc(8px + -50%) is treated as a
length followed by a plus sign and a negative percentage. The * and /
operators do not require whitespace, but adding it for consistency is
allowed, and recommended.
Can I set width or height of div to subtraction of a certain percentage?
Yes, you can. Use the standard calc() function in CSS. Be aware of it's current browser support, although it's pretty good at this point anyway.
.class {
width: calc(100% - 100px);
height: calc(100% - 100px);
}
If you use preprocessors like LESS or SASS, this also works too.
CSS calc() to subtract px from % is interpreting px value as a %
As suggested by CKH4 use box-sizing: border-box
instead. box-sizing
is better supported than calc
and it's neater and more flexible too.
.contained {
border-width: 1px;
width: 50%;
display: inline-block;
box-sizing: border-box;
}
Subtract element width from body width, and add as margin to element
You're on the right track.
var bodyWidth = $('body').width(); //Check the body width
var elemWidth = $('#content').width(); //Check the container width
var margin = bodyWidth-elemWidth; //Subtract the element width from the body width
var dividedMargin = margin / 2; // Divide the margin by 2
var negativeMargin = dividedMargin * -1; // set number to negative number
$(element).css("margin", negativeMargin); // replace element by the element name you want to apply this to.
You can also replace margin
by margin-left
, margin-right
,margin-top
or margin-bottom
.
CSS calc percentage divided by x then minus 1 px?
For better support than Flexbox, use CSS Tables as a solution and avoid the whole calc
requirement in the first place.
Support is good as far back as IE8
.wrapper { width: 100%; background-color: #bada55; display: table; table-layout: fixed;}.wrapper div { display: table-cell; height: 70px; background-color: rebeccapurple; border: 1px solid orange;}
<div class="wrapper"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
Setting width/height as percentage minus pixels
You can use calc
:
height: calc(100% - 18px);
Note that some old browsers don't support the CSS3 calc()
function, so implementing the vendor-specific versions of the function may be required:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
Div width 100% minus fixed amount of pixels
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div
element is auto
, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
Related Topics
Heroku Does Not Serve Background Image, Localhost Does
Gooey CSS Effects with Contrast Parent
CSS: Styling The Content of Before Pseudo Element on a List
Ssl and Mixed Content Due to CSS Background Images
Is There a Reason to Use Uppercase Letters for Hexadecimal CSS Color Values
Using Nth-Child to Style Item 4 and Onwards
Different Levels of CSS and The Priority Over Each Other
Why Does Bootstrap Include a Bootstrap-Theme File
Ionic - Ion-Item Text Is Not Vertically Centered When Ion-Icon Is Bigger
How to Apply CSS to a MAC Chrome Select Box
How to Left Align Bootstrap 3 Dropdown Menu
Twitter Bootstrap - Position Issue with Row-Fluid
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element
Webpack - Require('Node_Modules/Leaflet/Leaflet.CSS')
CSS: Before and: First-Child Combined
New Bulletproof @Font-Face Syntax Using Data Uris in Compass