This question already has answers here :
You can use calc, modern browsers support it and IE9+ as well.
div {
position: absolute;
height: 20px;
width: calc(50% - 10px);
padding: 5px;
}
Demo
Browser support
100% width minus margin and padding, .thing { width: 90%; /* fallback if needed */ width: calc(100% - 3em); } We need 100% minus the height of the header. as tall as browser window */ height: 100%; background: #ccc; padding: 20px; } body { padding: 20px; background: white; } over 100% + negative width (X+y) = 100%. The first definition adds some padding at each side of the table. The second definition shifts the table to the left, because it's a negative margin.
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example : http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
A Couple of Use Cases for Calc(), The problem is that if that item also has a margin or padding, that value is added onto the 100% width. So you end up with the element sticking Tip: CSS trick for DIV width:100% that accounts for margins or padding by subtracting In HTML coding, you learn quickly that width:100% is a common attribute for DIV elements. The problem is that if that item also has a margin or padding, that value is added onto the 100% width.
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Tip: CSS trick for DIV width:100% that accounts for margins or , width: calc(100% + 60px);. I am trying to replicate Bootstrap way of thinking, they have .container with 15px padding, then .row with negative margins, and then Another solution is to use display:table which has a different box model behaviour. You can set a height and width to the parent and add padding without expanding it. The child has 100% height and width minus the paddings.
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
How to correctly set full width of a div minus parent's padding? : css, When I audit CSS, I often see stylesheets beginning with box-sizing: border-box. input { width: 100%; box-sizing: border-box; padding: 10px; } width of the containing block minus the used values of side margins, paddings Because of this, borders, padding, and margin can be applied normally to all elements (ie: this 'naturality' goes beyond style and has ramifications). Note that this only works on divs and other elements that share its 'fill 100% of the width by default' property.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
Stop box-sizing everything, img{ width: 100%; background-color: #fff; box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8); border: thin solid #ccc; padding: 10px; }. The code However, I was surprised to relearn that the padding is also relative to the width of the applied elements parent node. So using percentages with padding works exactly as it does with margin . Lastly, I was curious about the styles: top , right , bottom , and left , which you can apply to any non-statically positioned element.
CSS 100% width minus paddings, margins and border, css width 100% minus 100px. New way: css calc(). width = 100% - 100px. Edit in JSFiddle. Result; CSS; HTML .calculated-width { width: -moz-calc(100% - 100px); width: -webkit-calc(100% Pingback: Solution: width: 100%-padding? There is a case for negative padding. I want an border framed around a div. This border is a styled image to create a frame design around the div. I need the container div to appear to be inside the parent div so the parent divs border frames it. I can’t use negative margins since the container div is above the parent div in the DOM.
css width 100% minus 100px – web-profile, Equal Height Column Layouts with Borders and Negative Margins in CSS has a width of 100% while the other has a definite width, like 100px. This is because margins, padding, borders, and width add up to the total Hi Louis, actually i guess this won’t happen in the given example, because the padding will be added to the width changing the final width. But It will happen if your parent element has an explicit width (like the example) and its child has width: 100% AND margins or paddings set.
The Definitive Guide to Using Negative Margins, it has width of 100% and defined border and padding 0px; great. the parent div has padding of 10px to the right and to the left. which works great on the right… but This has been driving me crazy for a couple of days now, but in reality it's a problem that I've hit off and on for the last few years: With HTML/CSS how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?
Comments With box-sizing: border-box you can manage to work around the padding, but not margin. This is not supported in Android Safari: caniuse.com/calc (the OP stated he was working on a mobile website) This is now supported on all major mobile browsers except Opera mini. Didn't knew about this css feature, it helps a lot on certain design situations and it's current browser support is quite wide. +1 Is there a way that I can make a CSS property that only has padding and corrects width? Something like setting width to the previous value minus padding. I love this one! I have been looking for other ways rather than using calc because I don't want to repeat the padding code. Note that display can be flex too. Note: This won’t work if you add padding to the INPUTs, unless you also adjust the box-sizing: jsfiddle.net/PFm3h/1 Yes, box-sizing would come in handy for this. And for vertical fill? For example: supposed you have text overlaying an image, and you want that text div to occupy a max-height of 100%, taking margin/padding into consideration while remaining docked at the bottom? And that's not even considering the fact that percentages for top and bottom margins are calculated relative to the width of the container, not the height, for some insane reason. @Triynko Im not sure I follow you here... Do you have a jsfiddle and a better description of what you are trying to accomplish? Also congrats on replying to a 2 yars old answer :) Does not work in Chrome, Firefox or IE because the inputs do not stretch to meet both the left and the right designations. It seems that left takes priority in all of these browsers. Not a real solution IMO, it will not produce an exact result.
