I want to be able to fill a parent's div exactly 100% with a child span.
The problem is the span that I want to fill it with is themed with themeroller and it has varying padding, and margins. So I cannot hard code any sizes for the height of the span.
If I try to set the height of the span to 100% then it actually goes over and fills more like 100% + 6 pixels for this theme (but the over amount varies by theme). How do you make it so no matter what size the padding/margins for the span it will only ever fill 100% of the parent div?
Thank you very much for the help.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
See http://jsfiddle.net/mbB8t/2/
Clarified: Works for all modern browsers (IE8+).
To make this work, you have to calculate the paddings and margins value by adding the 2xwidth of the span plus the height. then you can know what values to use for span to make it fill the parent div. check the examples here http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding
Related
So I came across a strange issue today, it only happens in Chrome.
Have a look at the fiddle:
https://jsfiddle.net/m1npLfcm/1/
<div class="table">
<div class="row">
<div class="cell">
<div class="content">
</div>
</div>
</div>
</div>
There is some basic table layout made of DIVs, a table, a row and a cell. All of them have 100% width and height. Inside the cell there's a regular DIV. It has 100% width and height and also some padding.
As we all know default box-sizing: content-box for div would push the boundaries by that padding. So I've made it box-sizing: border-box as I usually do and now I have this strange behavior.
Seems like in this situation, box-sizing: content-box is only applied to the width and height works just fine by default without pushing the boundaries. However if I add box-sizing: border-box - the width gets to work fine but the height gets total vertical padding subtracted from it as if previously content-box acted as it should have been.
Just what the hell is this? It only happens in Chrome and I'm totally confused. Has anyone seen this before and how this should be treated? Brief googling didn't help as this issue is quite hard to describe in a few words.
If you see the padding of 20px is the height you are talking about, since there is no elements or content inside the cell there browser only puts the padding.
In your fiddle I played around with the padding of the content and manage to fix the height with the size(red) with the value I want.
I hope that helps you.
Unfortunately an additional div wrapped around .content is required with a class like .inner that will serve specifically as a padding around content.
In this codepen I've changed a bit the CSS of your fiddle:
set box-sizing: border-box to all elements, as it's essential
replaced .cell with .inner (supported only by evergreen browsers, in IE <= 10 the .cell wrapper should remain)
removed the excessive width: 100% for block-level elements
The border/padding is applied correctly as long as the red background of the .table is covered by the .inner
On my page I have several elements defined to be 100% of the window's width, however I'm getting unexpected results from some of the divs. For example, if I use console.log to print out the window.innerWidth, I get a value of 1541, but when inspecting the html, body, and a few other divs that are set to width=100%, their calculated widths are 1526.
Even stranger, I'll begin to see a horizontal scroll bar before the content begins to be too wide for the browser and some of the elements span past the scrollbar and some do not.
A very strange issue indeed, please have a look at the site if anyone can point me in the right direction that would be wonderful:
http://www.newnoisegroup.org
div elements (and other display:block elements) default to stretching to the width of their container anyway, so setting width:100% for them is usually unnecessary anyway.
However if you do set them to width:100%, you can get issues like this because width:100% is not the same as stretch to full width.
The difference is that in the standard box model, the width of an element is the inner width; the border and margin are added on outside of box.
Therefore, if you have a box with width:100%and, for example,border:1pxandmargin:5px`, you will get 100% width plus an additional 12 pixels. This will clearly give you unwanted scroll bars as the box is wider than its container.
There are two solutions here:
Use width:auto or no width setting at all rather than width:100%.
Use box-sizing:border-box to switch the box model so that the border and margin are inside the width, so that width:100% will then produce a box that is actually 100% of the width of its container.
Hope that helps.
using box-sizing can fix width issues.
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
It often resolves issues with width and margin/padding
I have a div with this css specifications:
width:200px;
padding:5px
border:1px solid
and another div as it's child with this css:
width:100%
border:1px solid
and these divs has rendered in FF and IE like this:
But it seems the right padding is less than left one! can any one tell me why this behavior causes?
Thanks
this happens because the borders of the inner div are not part of the definition of the width itself, so your inner div is actually 100% + 2px wide.
you should specify box-sizing: border-box; for the inner div, so its width will include borders
See the MDN documentation for further information (and browser support) about this property.
Its the border that pushes it to the right. set box-sizing: border-box to the inner div.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
You should check the box model once again.
You are having a div with width 100% and adding border 1px to it, so the divs becomes 100% + 2px width and it's pushed to the right like you see.
You should drop the "width: 100%" and add just the border. (since the div is a block element it will take the full width)
You don't need to add box-sizing even, since IE7 won't support it. (if you want IE7 support)
What is the overflow like on your parent element? Unless I am mistaken your setting the width to 100% with a border, so the width is 200px inside a div that is 200px and so the border will not show.
My quick solution (sure there is a better way) would be to make the padding on the right 2px more or left 2px less than the overall padding.
My question is how to manage the size of an element (let's say a div) with percentage. I have a situation where I made two divs float side by side and both takes 50% of the div that contains them. Each of these two div have borders of 1px, margin of 5px and some padding. So how am I supposed to manage these static sizes and the dynamic size of the content (divs). Cause in the case I just mentioned, they will not float side by side because of the borders, padding and margin that make the size over (100%).
What are the solutions? In my case the sizes of margin/padding/borders are small so I guess I could just set the size a bit lower (like 45%) and hope it will fit. But I think this method is sloppy, since if I set the size of the padding higher, I will have to adjust the size of the div with trials and errors until I find the perfect size. Is there a proper way to achieve this?
Thanks a lot.
A clean work can be made by making the two floating divs with 0 margin and 0 border, just width at 50%.
Then inside each you can put a div that fits its container, with static margin and padding.
As alternative, you can keep everything dynamic, so put something like margin:1%, you'll get a nice behavior in window resizing!
From https://developer.mozilla.org/En/CSS/Box-sizing
/* support Firefox, Safari/WebKit, Opera and IE8+ */
.example {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
you can use box-sizing: border-box so that the 50% then applies to the inner+padding+border, but sadly no setting to add the margin.
You can however use a div inside a div and use padding on the outer div to mimic the margin.
here's an example JSFiddle
I'm looking for a solution to fit a child div into it's parent's width.
Most solutions I've seen here are not cross-browser compatible (eg. display: table-cell; isn't supported in IE <=8).
The solution is to simply not declare width: 100%.
The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).
See: http://jsfiddle.net/U7PhY/2/
Just in case it's not already clear from my answer: just don't set a width on the child div.
You might instead be interested in box-sizing: border-box.
You can use box-sizing css property, it's crossbrowser(ie8+, and all real browsers) and pretty good solution for such cases:
#childDiv{
box-sizing: border-box;
width: 100%; //or any percentage width you want
padding: 50px;
}
Fiddle
If you put position:relative; on the outer element, the inner element will place itself according to this one. Then a width:auto; on the inner element will be the same as the width of the outer.
In your image you've putting the padding outside the child. This is not the case. Padding adds to the width of an element, so if you add padding and give it a width of 100% it will have a width of 100% + padding. In order to what you are wanting you just need to either add padding to the parent div, or add a margin to the inner div. Because divs are block-level elements they will automatically expand to the width of their parent.
In case you want to use that padding space... then here's something:
http://jsfiddle.net/qD4zd/
All the colors are background colors.
You don't even need width: 100% in your child div:
http://jsfiddle.net/DanielDZC/w2mev/1/