
Designing with CSS – Box Sizing
We have already discussed some great new properties offered by CSS3. Starting with the previous article we focused on some of the most significant ways you can enhance user interface features in CSS3, and we will continue the same in this post and next few articles.
The CSS3 box-sizing property allows you to determine whether you want an element to render it’s borders and padding within its specified width, or outside of it.
By default, box-sizing property is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and place the border and padding inside the box. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.
Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing. Chrome and Opera just accepts plain box-sizing.
CSS3 Generator
If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.
You choose whether you want a border box or content box. The code will be generated.
Your Codes:
Border Box
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* WebKit */
Content Box
box-sizing: content-box;
-moz-box-sizing: content-box; /* Firefox */
-webkit-box-sizing: content-box; /* WebKit */
If your browser supports CSS3 box-sizing property, I give you below three examples.
Examples of CSS3 User Interface Box Sizing
Example 1 (Box Sizing: Border Box)
Padding and border do not make this box wider.
CSS Code:
width: 400px;
padding: 20px;
border: 3px ridge silver;
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Box width: 400 pixels and height: 150 pixels, including padding and borders.
Padding and border do not make this box wider or taller.
Example 2 (Box Sizing: Content Box)
Padding and border make this box wider.
CSS Code:
width: 400px;
padding: 10px;
border: 3px ridge gold;
height: 150px;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
Box width: 400 pixels + 10 pixels padding and 3 pixel border on each side = 426 pixels.
Box height: 150 pixels + 10 pixels padding and 3 pixel border on each side = 176 pixels.
Padding and border make this box wider and taller.
Example 3 (Box Sizing: Border Box)
Using box-sizing to proportionately share space.
This example uses box-sizing to proportionately horizontally split two divs with fixed size borders inside a div container, which would otherwise require additional markup.
CSS Code:
float: left;
width: 40%; /* width: 60%; right box */
padding: 10px;
border: 3px ridge silver; /* border: 3px ridge gold; right box */
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Left box width: 40% of container content width, including padding and borders.
Padding and border do not make this box wider or taller.
Right box width: 60% of container content width, including padding and borders.
Padding and border do not make this box wider or taller.
The two boxes in this example should appear side by side, each (including borders) 40% and 60% of the content width of their container. If the boxes are stacked one on top of the other then your browser does not support box-sizing property.
Box sizing is currently only supported in Firefox 1.0+ Chrome 1.0+ Safari 3.0+ Opera 7.0+ IE 8.0+
Check it out! Whether it works for you or not, please share with me by writing a comment, and mentioning your browser and version. Your feedback would be immensely helpful.
CSS3 Generator
This module describes selectors and CSS properties which enable authors to style user interface related states, element fragments, properties and values.
CSS3 Box Sizing Property
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design
Use CSS3 resize property to allow end user to resize an element
