Home arrow Style Sheets arrow Page 2 - CSS3 Properties: Fixed Heights with box-sizing
STYLE SHEETS

CSS3 Properties: Fixed Heights with box-sizing


In this two-part tutorial, I develop some examples to show you the functionality of the “box-sizing” property. You'll see how simple it is to use it to control the box model applied to elements on a web page.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 07, 2011
TABLE OF CONTENTS:
  1. · CSS3 Properties: Fixed Heights with box-sizing
  2. · Using the border-box Value

print this article
SEARCH DEVARTICLES

CSS3 Properties: Fixed Heights with box-sizing - Using the border-box Value
(Page 2 of 2 )

As I demonstrated in previous examples, the functionality of the “box-sizing” property really reaches its zenith when it's assigned the “border-box” value. This allows it to apply the “correct” box model to the targeted HTML elements. You may be wondering if this also applies to the earlier divs. Check the following code fragment, which hopefully will answer your question: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the box-sizing CSS3 Property (with a border-box value)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
.container {
    width: 320px;
    height: 200px;
    padding: 20px;
    margin-bottom: 20px;
    background: #FFF1EA;
    border: 2px solid #FF8F59;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3 Property (with a border-box value)</h1>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div> 
</div>
</body>
</html>

As I'm sure you’ll agree, it's simple to understand the definition of the “container” class assigned to the sample divs. The most relevant detail here is the use of the “box-sizing” property with the “border-box” value. In theory, this declaration would keep the elements’ dimensions untouched, regardless of the padding they're given. But, is this really true? 

Hopefully, the following image should help to dispel your doubts. It shows how the divs (at least one of them) are rendered on screen:

Now, doesn't that look sweet? As one might expect, the width and height assigned to the sample elements have been neatly preserved, which shows the remarkable work that “box-sizing” does behind the scenes when used with the “border-box” value. While this is a contrived scenario, it demonstrates that even though much of the excitement generated by CSS3 comes from other properties, like “border-radius,” “text-shadow,” and so forth, the standard also includes some hidden gems. These often-overlooked items, such as “box-sizing,” can improve the design of websites that follow a more standard approach.   

Closing Remarks

In this two-part tutorial, I went through the development of some examples which showed off the capabilities of the “box-sizing” property. You saw how simple it is to use it to control the box model applied to elements on a web page.

As you may have guessed, the property’s biggest pitfall is its lack of support by Internet Explorer (at least IE6/7). This issue can be easily addressed with some conditional styling methodologies. Thus, now that you’re familiar with the inner workings of “box-sizing,” go ahead and start using it in your own web projects. You’ll have a lot of fun, believe me.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials