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
Related
Why does adding some padding affects elements outside the DIV box? Padding isn't supposed to create some space between the border of the DIV and contents inside it? How can you create this space without affecting elements outside the DIv box?
How can you create this space without affecting elements outside the
DIv box?
Use box-sizing: border-box
From MDN:
border-box
The width and height properties include the padding and
border, but not the margin.
The reason that this property must be set is because by default the value for box-sizing is content-box. Again from MDN:
content-box This is the default style as specified by the CSS standard. The width and height properties are measured including only
the content, but not the padding, border or margin.
Assuming you have specified a content height or width, then padding will be placed around that. That moves the border outwards. That moves the margin outwards. That pushes nearby elements away.
You can change it by reducing the height and/or width to compensate or by using the box-sizing property to make height and width determine the distance between the outside edges of the border instead of the outside edges of the content.
Try looking into the box-sizing property...
https://css-tricks.com/box-sizing/
Today, the current versions of all browsers use the original "width or
height + padding + border = actual width or height" box model. With
box-sizing: border-box;, we can change the box model to what was once
the "quirky" way, where an element's specified width and height aren't
affected by padding or borders. This has proven so useful in
responsive design that it's found its way into reset styles.
The value you're after is border-box:
.class {
box-sizing: border-box;
}
I have a div with a width of 100% and paragraphs inside. The div has padding of 1.1em. On Chrome evrything works as expected - div spans to 100% of parent's space and paragraphs get squeezed a little due to the padding.
However on Firefox div expends to 100% + padding. How to do I force inner padding on firefox?
How to do I force inner padding on firefox?
Use box-sizing: border-box; for the element, as by default, the padding border and margin are counted outside the element.
Using box-sizing: border-box; will alter the box model, which will make the padding and border to be counted inside the element instead of outside.
Demo Without box-sizing
Demo With box-sizing
See the difference? You won't get a horizontal scroll bar in the second demonstration, where am using border-box value for box-sizing property.
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.
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 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