Fluid CSS layout and Borders

Question

In designing a fluid layout, how do you use borders without ruining the layout.

More specifically, I have a HTML widget which consists of five divs. I would like the fi

Answer 1

See this article.

Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).

In CSS3, you can switch to a different box model as follows:

box-sizing: border-box;

Browser-specific implementations of this are:

-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8

This will cause the box sizes to include the element's border and padding. So you can now specify

.box { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   width:20%;
   border:1px solid red;
   float:left
}

and have the five divs take up all the width of the containing element without wrapping.

Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.