Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns. Fortunately, you can tell the browser to keep specific elements together with break-inside. li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } At the moment, the property universally accepts the values auto and
B
* { -moz-box-sizing: border-box; /* Firefox 1, probably can drop this */ -webkit-box-sizing: border-box; /* Safari 3-4, also probably droppable */ box-sizing: border-box; /* Everything else */ } The box-sizing property in CSS controls how the “box model” is handled in regards to page layout. For instance, if you set an element to width: 100px;
Used in casting shadows (often called “Drop Shadows”, like in Photoshop) from elements. Here is an example with the deepest possible browser support: .shadow { -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 – 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 – 3.6 */ box-shadow: 3px
The bottom property in CSS goes hand in hand with positioning. By default, elements arestatic positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the bottom value plays a big role. div { bottom: value (px, em, %, pt, etc) || auto