Comments on: box-sizing https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 18 Jan 2023 21:29:08 +0000 hourly 1 https://wordpress.org/?v=6.4.3 By: Srini https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1641786 Sun, 01 Jul 2018 08:18:34 +0000 http://css-tricks.com/?page_id=13978#comment-1641786 Thank you, well explained

]]>
By: Steve https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1605589 Thu, 15 Dec 2016 05:01:13 +0000 http://css-tricks.com/?page_id=13978#comment-1605589 Help:
I want to but a box around several test strings that can change in length, and keep it all on one line.

The css I started with is as follows
boxblueleft {
border: solid;
border-width: 1px;
border-color: #0000ff;
width: 200px;
min-width: 200px;
max-width: 600px;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
white-space: nowrap;
}

I can preset the actual width by fiddling with the width, min-width and max-width parameters, but as the longest string length changes, the text will overflow the box width (as it gets longer) or leaves a huge whitespace at the end of the string as it gets shorter…

Can anyone point me in the correct direction please

]]>
By: Steve https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1605588 Thu, 15 Dec 2016 04:59:07 +0000 http://css-tricks.com/?page_id=13978#comment-1605588 Help:
I want to but a box around a test string that can change in length, and keep it all on one line.

The css I started with is as follows
boxblueleft {
border: solid;
border-width: 1px;
border-color: #0000ff;
width: 200px;
min-width: 200px;
max-width: 600px;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
white-space: nowrap;
}

I can preset the actual width by fiddling with the width, min-width and max-width parameters, but as the longest string length changes, the text will overflow the box width (as it gets longer) or leaves a hugh whitespace at the end of the string as it gets shorter…

Can anyone point me in the correct direction please

]]>
By: Psider https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1605068 Fri, 18 Nov 2016 23:32:23 +0000 http://css-tricks.com/?page_id=13978#comment-1605068 I just noticed the latest version of Firefox (50) removes support for padding-box:
https://developer.mozilla.org/en-US/Firefox/Releases/50#Changes_for_Web_developers

]]>
By: Rachel https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1596907 Fri, 11 Sep 2015 18:28:52 +0000 http://css-tricks.com/?page_id=13978#comment-1596907 In reply to npprogrammers.

In your equation you’re adding the padding and border for one side only. The other side needs to be added as well. The padding is 20px on one side of the box AND 20px on the other side of the box. All of the padding needs to be accounted for, so it must be doubled which comes to 40px total. The same goes for the border. So in the end, the calculation is:
100px width of content
40px total padding width (20px left + 20px right)
10px total border width (5px left + 5px right)
150px total

]]>
By: vasanth https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1596499 Thu, 20 Aug 2015 09:37:56 +0000 http://css-tricks.com/?page_id=13978#comment-1596499 I have two div’s and giving same width for them and same number of columns and using the upper div as header and lower one as the body for the header and now in thi..if padding is removed for both of them they are aacquiring same width but if i give padding: 10px; then they are differing by 0.5px difference..I gave box-sizing but the issue is still present..

]]>
By: npprogrammers https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1595230 Tue, 16 Jun 2015 07:27:55 +0000 http://css-tricks.com/?page_id=13978#comment-1595230 The Article was good!but i was confused at using box sizing section.
Actually
width of content: 100px;
padding : 20px;
border : 5px;
Total : 125px;
but you are show it as 150px, how it was happen

]]>
By: Eric Andrew Lewis https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1585796 Wed, 08 Oct 2014 17:45:36 +0000 http://css-tricks.com/?page_id=13978#comment-1585796 In reply to m_gol.

Firefox requires the browser prefix up to FF 27, Safari requires the prefix up to 5.

]]>
By: Jan https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1584002 Thu, 24 Jul 2014 07:16:28 +0000 http://css-tricks.com/?page_id=13978#comment-1584002 -webkit prefix needed for Android default browser (Android 2.3.6)

]]>
By: Matthew Vaughan https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1583140 Wed, 25 Jun 2014 20:35:07 +0000 http://css-tricks.com/?page_id=13978#comment-1583140 Just a note that the comment in the code next to -moz-box-sizing still says “Firefox 1, probably can drop this”. Should say “Firefox 1-28”.

]]>
By: Roland Hentschel https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1527058 Sun, 06 Apr 2014 10:30:03 +0000 http://css-tricks.com/?page_id=13978#comment-1527058 Hi,

I’m having problems with Safari and Seamonkey, when using border-box on floated divs

) http://rh-balingen.de/FLUID-GRIDS/floating.html

The height can’t be %, but has to be px.

) http://rh-balingen.de/FLUID-GRIDS/safari.html

When using relative and absolute positioning, % is OK.

) http://rh-balingen.de/FLUID-GRIDS/relative.html

I just don’t understand, what the problem is …

]]>
By: tzi https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1482705 Sun, 30 Mar 2014 20:36:58 +0000 http://css-tricks.com/?page_id=13978#comment-1482705 Thanks for sharing this article!

One note, the Firefox bug with min / max-height seems to be fixed since the version 17.

Cheers,
Thomas.

]]>
By: Daniele Manca https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1456275 Thu, 27 Mar 2014 09:56:33 +0000 http://css-tricks.com/?page_id=13978#comment-1456275 Hey folks,

I am trying to apply this property to fix a problem I have on the below page,

http://hdl.fitzroviadigital.co.uk/corporate-investment-banking/

The main section is creating a white space between the section img and the aside, however even by applying box-sizing: border-box to the universal selector, nothing changes,

Any clues?

]]>
By: Chris Coyier https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1128908 Sat, 01 Feb 2014 22:55:42 +0000 http://css-tricks.com/?page_id=13978#comment-1128908 In reply to ngwdaniel.

Correct, fixed.

]]>
By: Chris Coyier https://css-tricks.com/almanac/properties/b/box-sizing/#comment-1128906 Sat, 01 Feb 2014 22:55:24 +0000 http://css-tricks.com/?page_id=13978#comment-1128906 In reply to m_gol.

Correct, fixed.

Unprefixed in 29+. Prefixed below.

]]>