The linked question stackoverflow.com/questions/11093943/… gives an interesting, but not fully backward compatible answer, maybe you would like to take a look on that too.
For anyone who crosses this question Chad answered that modern browsers supports width: calc(100% — 100px); it’s a few answers down and I hope the asker will update his question 🙂 🙂
18 Answers 18
Modern browsers now support the:
To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?
I found when I was using calc(100% — 6px) for example it was displaying as calc(94%) , I had to escape it as follows and now it works width: calc(~»100% — 6px»);
Be aware, you must have whitespace around the — (or + ) character. This works: calc(100% — 100px); And this doesn’t: calc(100%-100px);
I’m a little surprised there’s no option to automatically subtract 2x the padding of the element, which would usually be a pretty common usecase. E.g., I end up having to do padding: 0.25em; width: calc(100% — 2 * 0.25em — 2em); , and would have to change the 0.25em in two places now if it has to be amended.
Could you nest a div with margin-left: 50px; and margin-right: 50px; inside a with width: 100%; ?
First solution is correct, the container might not be the window and therefore 100vh might not equal 100%
I found when I was using calc(100% — 6px) for example it was displaying as calc(94%) , I had to escape it as follows and now it works width: calc(~»100% — 6px»);
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) .
You need to have a container for your content div that you wish to be 100% — 100px
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:
Of course you can modify «top» and «right» values, according to your indentations. Source
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.
down votes are usually meant to encourage you to clean up your post so you can regain rep points lost by the negative votes. If you know your solution to be wrong you can delete if with or without down votes or update it to make it right.
@AdamCrume — Nope. That would only be the case if you also specified width:100% . A div will automatically fill the container unless you override that, eg, by explicitly specifying width , or by using float or absolute positioning. Adding a margin to a div will just cause it to fill its container, less the amount specified by the margin.
@aleemb — In this case the downvotes are by users who don’t understand css as this answer is perfectly correct.
Padding on the outer div will get the desired effect.
100px smaller than outer
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.
And then there’s position: absolute
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.
This is what I got so far. -The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% — 100px; -The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5. I’m having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width. Can anyone help me? Regards,
2 Answers 2
You can use box-sizing for this. write like this:
You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.
Depending on what browsers you intend to support, you can make use of CSS3’s box-sizing property. By setting box-sizing: border-box; , you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.
If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:
Is there any work around to do something like this work as expected? I wish there were something like that width:remainder; or width:100% — 32px; . width: auto; doesn’t works. I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;. I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/
9 Answers 9
Updated answer:
The answers here are pretty old. Today, this can be achieved easily with flexbox:
Block level elements like will fill 100% of the available width automatically. If you float one of them to the right, the contents of the other will fill the remaining space.
+1 I’m all out of votes but this answer is simple, and doesn’t involve any of the issues with positioning.
OMG so simple, I tried this but doesn’t work, because I put the div opposite. jsfiddle.net/5AtsF/1 Why?
The reason it doesn’t work if you place the floated div second is because the first div fills the full width, forcing the second div to the next line. Take a look at css-tricks.com/2841-the-css-box-model for more information.
Is it just me, or does this not actually work? In the fiddle it takes up the full width, rather than the remaining width.
For anyone looking over this now theres a newish css property method called calc which can perform this in a much more flexible fashion.
As a word of warning, this is not very portable and support is ropey on mobile devices. IOS 6+ and andriod 4.4 i believe. Support is significantly better for desktop though, IE 9.0+.
I have used a JS hack in the past to achieve this technique if anyone is incredibly stuck, a different layout is more advisable though as resize is slower.
window.addEventListener('resize', function resize()< var parent = document.getElementById('parent'); var child = document.getElementById('child'); child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element >, false);
Getting a 100% height/width border on main div(or body)
http://designobvio.us/vodka/ Live demo I’ve set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars? How can I achieve an effect? HTML
5 Answers 5
By default the borders, margin and padding are not part of width/height and are added on top. That’s why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box , which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box , which is the default value):
As especially IE8 and the earlier version of the other browser families don’t support this css-property, it’s a good idea to add some browser-specific definitions, too:
I know this is an old post, but as it pops up on Google first page. Here is my solution that seems to work fine cross browsers:
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you’re really telling it is «make the box 100% and then add 10px worth of border».
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100% . So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/ 2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body < height:100%; padding: 0; margin: 0; >#container < min-height:100%; border-right: 5px solid #000; border-left: 5px solid #000; position: relative; /* relative postion so we can absolutely position footer within it */ >#header < height: 100px; border-top: 5px solid #000; background-color: red; >#content < padding: 0 0 100px 0; >/*padding must be equal to the height of the footer*/ #footer < height: 100px; border-bottom: 5px solid #000; background-color: blue; position: absolute; bottom: 0; width: 100%; /* with absolute position, a width must be declared */ >
How to set a div width with border in fix width div
How can i set a div width with border:2px solid the border comes out from parent div Note :- I want to fix in IE also. posting an example to better understating.
Well just remove the width then (div as block element takes the full width automatically, so in this instance it is not needed) — or go read up on the box-sizing property.
5 Answers 5
Just add display: block; to that div. Check updated Snippet below
Why would you need to add display: block to a div? A div is a block element already. Your code works because you have removed width: 100%
@Super User i will accept your answer because it’s working and no need to write any css for IE.. Thanks buddy..
Try this, box-sizing property can slove your problem.
Just add box-sizing: border-box; to .two like this:
No fancy tricks. Note that adding box-sizing: border-box; to *, *:before, *:after as showed above may break other parts of your layout.
Just add box-sizing: border-box; to like this:
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
