JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

DIV or Box/Container Model

The web is made up of boxes that contain content (text, images, music, videos, etc). This boxes or containers are created with the HTML <div> tag.

<div> is how you create a box, just be sure to close the HTML tag with </div>

Divs have CSS properties of WIDTH, HEIGHT, MARGIN, BORDERS, PADDING. Understanding all of these properties will ensure that you can precisely layout content with the pixel perfect TRUE WIDTH and TRUE HEIGHT. (Note: this method was used prior to CSS3)

Box Model

Note these variations in the attribute value - think this SPECIFIC order of Top, Right, Bottom, Left or TRBL or “TRouBLe”:

All of the above to set a div to a specific target width width padding and borders were the methods web designers used PRIOR to some features of CSS3.

Here's a more SIMPLE way to think about all of this using CSS3 ...

Why use CSS of box-sizing: border-box ?

When you create a div for content with a specific width and some padding, the total width of the div is the width + (2 x padding) and this can be problematic because adjusting the padding then requires adjusting the width also to get the final result of a div with a particular width.

The solution to this double adjustment is to use this CSS * { box-sizing:border-box; } where the * is the CSS wildcard that refers to EVERYTHING and box-sizing:border-box; sets the DW LIVE or browser rendered view of the div to the actual CSS width no matter what the padding.

* {
     box-sizing:border-box;
}
div {
     width:600px;
     height:600px;
     background-color:rgba(255,0,4,1.00);
     padding:100px;
     margin:50px;
     border:10px solid #000;
}

This div has box-sizing:border-box applied to it and it's rendered width is truly 600px.

If you change the padding or border width, the rendered div will ALWAYS have a width that matches what you set in CSS NOT adding any padding or border width to the rendered width of the div

* {
     box-sizing:border-box;
}
div {
     width:600px;
     height:600px;
     background-color:rgba(255,0,4,1.00);
     padding:100px;
     margin:50px;
     border:10px solid #000;
}
#div2 {
     box-sizing:content-box;
}

This #div2 has box-sizing:border-box NOT applied to it and its rendered width is NOT 600px but 720px because
padding left + border left + width + padding right + border right
     100          +       10          +  500   +      10                +        100         = 720px

If you wanted a div at 600px with padding of 100px and border width of 10px without using box-sizing:border-box; you would then need to set the width to LESS than your target width like this
padding left + border left + width + padding right + border right = rendered width
     100          +       10          +  280   +      10                +        100         = 600px

CSS of box-sizing:border-box; eliminates the process of having to change the width when you adjust the padding or border width.