6 TYPES of Box Models

The very best resource I have found for understanding box models is in the book Pro CSS and HTML Design Patterns by Michael Bowers. The examples on this page come are from the text. If you would like to look through it, email me the day before class.

DIVs are essentially boxes that have rules.

Every element is essentially rendered as a box. Each box has properties which are applied to both an inner (content) and outer part (margin, border, and padding). The overflow determines what happens when content is larger than the its inner box (the default it to show the overflowing content which can have disastrous affects with images)

Measurements and parts of the Box Model

parts of the box:

boxmodel css

source: http://www.imustdesign.com/lectures/images/css_box_model.gif

Note Problem: Work-around's are available for this IE 5 and earlier bug / it is only an issue if you are supporting a IE 5 and earlier versions (arguably but rarely is required today)

Block Box Model

Block Boxes flow vertically from the top to the bottom. These boxes can contain other boxes or they can terminate the block formatting context and start and inline formatting context containing inline boxes.

 

Table Box Model

USE ONLY AS TABLE. Tables participate in the block flow and its cells participate in the table flow. Designers who use CSS for the elements other than the actual layout, still use tables. This is a near use of CSS, but it is better to use CSS for all of your presentation. The only place you would want to use a table is for an actual table, or if possibly if you had an insistent client who would be doing most of the updating of content (extended maintenance).

Note: A table can NOT Overflow it's contents

Absolute Box Model

An Absolute Element is removed from the normal flow and put in a layer above or below it. It is positioned in relation to its closest position ancestor or fixed to the viewport.It can be sized, stretched or shrink wrapped to its closest positioned ancestor. Any element can be positioned absolutely. Unlike other boxes, the position of the absolute box does NOT affect the position of other boxes. Absolute boxes can overlap. The Z index controls the stacking order, a larger value moves element closes to the viewer, and a smaller number below. A negative number/value places the element below the normal flow.

Floated Box Model

Any element can be floated left or right. Like the absolutely positioned element, a floated element is removed from the normal flow. It is placed above the borders and background of adjacent blocks. This shrinks the float's parent and COLLAPSES it completely when all it's children are floated.

Caution: If floats do not have sufficient horizontal space for the content, the element will drop to the next line (aka float drop). ALWAYS make sure that margin's border, padding and widths can accommodate your plan.

Inline Box Model

Content flows left to right and wrap to new lines. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condiment

Note: Width, Height and Overflow do not work on inline elements BECAUSE they always shrink wrap to fit the width and height of their content.

Inline-Block Box Model

As the name implies.