Comments on: box-sizing

By: Srini

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

Thank you, well explained

]]>

By: 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

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

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

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

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

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

Wed, 08 Oct 2014 17:45:36 +0000

By: Jan

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

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

]]>

By: 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

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

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

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

Sat, 01 Feb 2014 22:55:42 +0000

By: Chris Coyier

Sat, 01 Feb 2014 22:55:24 +0000