Harnessing Div Dimensions

You've probably experienced this:

Changing the padding or border of a div generally won't change the dimensions of the content area. Instead, the div dimensions are adjusted according to the space required for the padding and the borders.

But there is a fix to keep the div from resizing itself. It's a CSS property called box-sizing.

With the box-sizing CSS, the dimensions of the div are maintained and the content area dimensions are adjusted — instead of the other way around. Adjusting padding and borders will maintain the div's dimensions so the div continues to fit nicely in your page design.

Let me demonstrate with a few divs. (The demonstrations have background colors so borderless div edges can be seen.)

Two divs, both 200 pixels wide and 50 pixels high, no box-sizing CSS applied:

The padding in the second div is 10 pixels and the border is 3 pixels wide. Thus, both the horizontal and vertical dimensions of the div are increased by 26 pixels (10x2+3x2). The dimensions are now 226 pixels wide and 66 pixels high.

Here are the same divs except the second div has the box-sizing CSS:

The dimensions of the div remain 200 pixels by 50 pixels even with the 10px padding and 3px border added. The content area became smaller instead of the div becoming larger.

Here's the box-sizing CSS (example follows):

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

Here's the code for an example of using the CSS. The div the example renders is below the code.

<style type="text/css">
.example {
   -moz-box-sizing:border-box; 
   -webkit-box-sizing:border-box; 
   box-sizing:border-box;
   width:300px; 
   height:100px; 
   padding:10px; 
   border:1px solid #666;
   }
</style>

<div class="example">
Content in div.
</div>

The -moz-box-sizing property is for Firefox (2.0-29.0) and the -webkit-box-sizing property is for both Chrome (4.0-10.0) and Safari (3.2-5.1). The latest versions of those browsers recognize box-sizing without the "-moz-" or "-webkit-" prefix, as do IE (8.0+) and Opera (9.5+).

Browser versions that don't recognize the box-sizing CSS generally will resize the div when padding or borders are added or changed.

To be more specific about the box-sizing property, it specifies what area of the div (the box) is included with sizing specifications.

box-sizing:content-box; means to size the content. (This is the default.) Any padding and borders (being outside the content) will be put outside the size specified for the content within the div — resulting in the div dimensions being adjusted and the content dimensions remaining the same.

box-sizing:border-box; means to size the border. Any padding and content (being inside the border) will be put within the size specified for the border of the div — resulting in the div dimensions remaining the same and the content dimensions being adjusted.

With the box-sizing CSS, you now have a choice. You can tell the browser which part of the div the sizing information shall apply to, the content or the border (or the outside edge of the div when no border is specified).

(This article first appeared in Possibilities ezine.)

Will Bontrager