Why isn't max-height applied on the box in this example ? It seems like that the border-box mode is ignored (tested on Chrome), but it seems counterintuitive.
The box-sizing property isn't ignored, this is exactly how the border-box value should behave:
Your padding is set to 100px on top and bottom, therefore 200px of your element's height is consumed by the padding.
If you specify a height of 200px, the computed height will be 0 because 200 - 200 is 0.
If you specify a height of 201px, the computed height will be 1, etc.
From the box-sizing documentation:
The content width and height are calculated by subtracting the padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative, this computation is floored at 0.
This is easily demonstrated using borders instead of padding:
#test {
background: #000;
border-width: 100px 0;
border-style: solid;
border-color: red;
height: 200px;
box-sizing: border-box;
}
Here our element has a black background and a red border, however as its height is equal to the sum of the top and bottom border widths, the element ends up with 0px computed:
As you can see, the box is entirely red. The element has no height so there is no black background to be seen. If we adjust the element's height to 250px, we end up with:
The element's computed height here is 50px, so we see 50px of the background. The remaining 200px is consumed by the border.
Related
To my understanding, using box-sizing:content-box, when setting the padding and margin of an element in percent, these will be the percent of the width of the actual content area. So a 50% margin of a 300px wide image, without any relation to its padding, will create a 150px wide margin and therefore an actual size of 450px width (+padding).
Now, when I use box-sizing:border-box, width is defined as content+padding+border. If I set the padding of my element in border-box using percent, will it refer to this different definition of width, therefore referring to itself? If not, and it refers to the content's width only, in that case the content width itself is also dependent of the padding's and border's width (content width=(border-box width)-border-padding), therefore a higher percentage on the padding would refer to a smaller content, making the padding itself smaller again. Am I understanding this right? This seems like the padding would base itself off itself to me in both cases. What am I missing? And in what order is the browser calculating the percentages, based on what (the content only or the actual width)?
Thanks a lot!
It doesn't matter what you set box-sizing to with respect to how the actual sizes of margins and borders are calculated. It will be the same either way.
What content-box or border-box do is control with width and height of an element so that the border and padding are not included (content-box) or they are included (border-box) in the overall size specified by height and width.
Also, borders can't have a width set to a percentage and padding is based on the element's width, not content.
#one {
box-sizing:content-box; /* default */
width:100px;
height:100px;
padding:10%; /* padding % is a percentage of the element's width */
border:1px solid red;
border:10% solid black; /* Borders can't be set to percentages */
background:yellow;
float:left;
}
#two {
box-sizing:border-box; /* default */
width:100px;
height:100px;
padding:10%; /* padding % is a percentage of the element's width */
border:1px solid red;
border:10% solid black; /* Borders can't be set to percentages */
background:blue;
float:left;
}
<div id="one"></div>
<div id="two"></div>
What is the difference between height property and max-height property. It is understandable that if we set the max-height to 50px, the height of the element would not exceed 50px. But if we set only the height to 50px, then also the height would remain 50px. What is the difference ?
It is basically what you said. A div with a height of 50px will always be 50px tall.
A div with a max-height of 50px can be less than 50px tall, but when the content inside of it pushes it down, the div will become no larger than 50px in height.
Suppose you have a div block with id my_block. max_height puts a cap on the maximum allowable height that can be set:
#my_block{
width:20px;
height:60px; // You can try to set the height to 60px, but the max-height of 50px won't let you...
max-height:50px;
border:1px;
border-style:solid;
}
Setting the height to 50px is great but it doesn't make adaptable pages.
Instead setting the height to something like 100% means that it will show different heights on different devices with different screen sizes and will be more adaptable.
Setting a max-height setting the max-height to 50px will keep it adaptable but always under 50px.
For example setting the height to 480px would look fine on an iphone however it would look super small on a laptop. If you set the height to 100% though, it will fill the screen for both :D
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
I have a text area and I added some CSS to it
<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>
and CSS applied to it -
.test-input {
border: 1px solid #D0D0D0;
border-radius: 3px 3px 3px 3px;
color: #646464;
float: left;
font-family: Arial;
font-size: 12px;
height: 20px;
margin: 0 0 0 15px;
padding: 5px;
resize: none;
width: 264px;
}
And I get the text area with some padding inside it. In the cases when it works absolutely fine, text area height comes to be 20px with 5px padding not included in height. But, in few cases height of the text area includes padding and the height gets reduced to 8px. I have looked for any css if its overriding it but I didn't find. And I compared the result in both cases. Left is the reduced height and right is the expected height.
I can fix this issue, in other case managing height specifically, adding !important or with help of some JavaScript. But, I am wondering what's the cause here that's making such effect. Why and in which cases paddings are getting included with height or width?
That depends on what box-sizing attribute you have used:
border-box means that the height and width of the box, defined/calculated in CSS, will also include the padding(s) and border width(s) applied to it
content-box is the default behavior, where padding(s) and border width(s) are added onto the defined/calculated height and width of the box.
By setting box-sizing: border-box as seen in your left example, you have defined the height of the element at 20px. This means that the actual content box will only be 8px tall, because the browser will subtract the border (1px top, 1px bottom) and padding (5px top, 5px bottom) form the defined height, leaving only 8px left, which is a tad bit too short to contain height of the entire line (therefore the word appears to be cut off).
jQuery seems consistent with these definitions:
.height() does not include padding (even where box-sizing: border-box)
.innerHeight() includes padding but not border
.outerHeight() includes padding and border
.outerHeight(true) includes padding and border and margin
Each can set or get, e.g. $element.outerHeight(desired_height_including_margins, true);
(Images excerpted from linked pages.)
Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing,
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width, making the element wider than
100px.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you
set an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
I have following code:
<div style="border:4px solid black;width:100%;height:100px;position:fixed;left:250px;">
out of bound :(
</div>
I want it not to cross the window. I need its right border to stay visible.
JSFiddle link: http://jsfiddle.net/9SZAB/
Remove the width property and instead use right: 0:
div {
border:4px solid black;
height:100px;
position:fixed;
left:250px;
right: 0;
}
Updated fiddle: http://jsfiddle.net/9SZAB/2/
Why this works: position: fixed tells the element to have a fixed position relative to the viewport, so that the positioning properties left, right, top, and bottom, as well as width and height will position and size the element based on the size and boundaries of the viewport.
Previously you had width: 100%, which, combined with position: fixed, means that the element's width should be 100% of the viewport's width. This width is not and should not be affected by any margins or positioning that you also set - the element will still have 100% of the viewport's width, no matter where it is.
But if the element has a width value of auto (which is default), then the positioning properties can be used to size it. Just as left: 250px means that the left side of the element should be 250px away from the viewport's left boundary, right: 0 means that its right side should be 0 (px, em, parsecs - unit doesn't matter for a value of 0) away from the vp's right boundary. Resize the viewport and this state will still be true.
more info: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/