Out of bounds with box-sizing

Using box-sizing makes life easier, but it does not always work the way you think.

In this case you would expect the div to have a height of 100px, because of the max-height, but no, it will have a height of 150px. This is because of the way box-sizing works. About box-sizing on dev.w3.org:

…any padding specified on the element is laid out and drawn inside this specified width and height. 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.

So, when the padding exceeds the height (or width) of the element, the content is floored to 0. This means there is a problem, because the padding does not fit in the element. In that case the box-sizing property is ignored and the element will overflow the max-height.

A fiddle.

CSS-string to jQuery object

CSS-selectors are clean and clear, element#id.class.another-class. But why, if we want to create an element, do we have to do this?

I build a css parser that converts a css-selector into a jQuery object. For now, only node-type, id and classes are implemented.

Creating an element is now a piece of cake.

The wins might not be as astronomical as I make it sound, but in future posts I might come up with some handy uses for this code.