Home arrow Style Sheets arrow 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
(Page 1 of 2 )

If you think that the many new features included with CSS3 can only display nifty rounder corners, drop a few native shadows around text and boxes and animate HTML elements, then take a look at “box-sizing.” This underrated property of the standard lets you easily control the way that the box model of a selector is rendered on screen.

In other words, “box-sizing” specifies whether or not the padding added to an element will affect the dimensions assigned to it (read: its width and height). That’s pretty good, since implementing a correct box model used to be a lost cause for most web designers. So, there’s hope on the horizon!

If you've already read the first part of this tutorial, you understand how the “box-sizing” property does its thing. In that article I developed a couple of basic examples, which showed how to employ the property in two ways: first, to apply the default box model to some divs with a fixed width; and second, to apply it to some divs using the correct model mentioned previously. In both examples, the entire styling process simply involved assigning to “box-sizing” the values “content-box” and “border-box,” respectively.

Even though I’m pretty sure that you've already grasped the property’s underlying logic, there’s one more common use case I need to cover. I need to demonstrate the functionality of “box-sizing” when working with web page elements that have been assigned a fixed height.

That’s exactly the topic that I plan to cover in this last installment. If you want to learn more, just keep reading. 

Assigning Fixed Heights to Web Page Containers

As I said in the introduction, this discussion of the “box-sizing” property would be incomplete if I didn't show you how to use it with HTML elements that have been given a fixed height. Below I coded a web page similar to the one that you saw in the preceding installment. It includes a couple of sample containers.

Here it is:

<!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</title>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3</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>

The structure of this example (X)HTML document is so trivial that it doesn’t bear any further explanation. So let's take a look at how the above containers behave when they’re assigned a height in pixels and the “box-sizing” is attached to them.

Here's the example that does just that:
       
<!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 content-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: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3 Property (with a content-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>

There’s no need to be a CSS guru to realize what output this example will generate, right? The sample containers have a width of 320px and a height of 200px. However, since the elements’ padding is 20px and the value assigned to “box-sizing” is “content-box,” they’ll be rendered by using the default box model. This process is depicted in the following image:   

It doesn’t make any sense to exploit the functionality of “box-sizing” in this way; it won’t produce any noticeable effect in the way that the target elements will be displayed on the browser. But, as you may recall, it’s possible to tweak the elements’ box model by assigning to the property the value “border-box.” In the next section I’ll be subtly modifying the previous example. This time, it will use the property with the aforementioned value.

To see how this will be done, click on the link that appears below and keep reading.


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