Comments on: box-sizing

By: Srini

Srini — Sun, 01 Jul 2018 08:18:34 +0000

Thank you, well explained

By: Steve

Steve — Thu, 15 Dec 2016 05:01:13 +0000

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

Steve — Thu, 15 Dec 2016 04:59:07 +0000

Help:
I want to but a box around a test string that can change in length, and keep it all on one line.

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

Psider — Fri, 18 Nov 2016 23:32:23 +0000

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

Rachel — Fri, 11 Sep 2015 18:28:52 +0000

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

vasanth — Thu, 20 Aug 2015 09:37:56 +0000

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

npprogrammers — Tue, 16 Jun 2015 07:27:55 +0000

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

Eric Andrew Lewis — Wed, 08 Oct 2014 17:45:36 +0000

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

By: Jan

Jan — Thu, 24 Jul 2014 07:16:28 +0000

-webkit prefix needed for Android default browser (Android 2.3.6)

By: Matthew Vaughan

Matthew Vaughan — Wed, 25 Jun 2014 20:35:07 +0000

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

Roland Hentschel — Sun, 06 Apr 2014 10:30:03 +0000

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

tzi — Sun, 30 Mar 2014 20:36:58 +0000

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

Daniele Manca — Thu, 27 Mar 2014 09:56:33 +0000

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

Chris Coyier — Sat, 01 Feb 2014 22:55:42 +0000

In reply to ngwdaniel.

Correct, fixed.

By: Chris Coyier

Chris Coyier — Sat, 01 Feb 2014 22:55:24 +0000

In reply to m_gol.

Correct, fixed.

Unprefixed in 29+. Prefixed below.