THE BOX MODEL Putting layouts together with CSS

The Box Model  How would you describe a box?  Container?  Tags or elements are “containers”  puts the text it contains into paragraph form.

Box Model content edge or inner edge The content edge surrounds the element's rendered content.rendered content padding edge The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box. containing block border edge The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. margin edge or outer edge The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has 4 edges:

Box Model diagram

Example in Class  Applying the Box model  Adding an image  Floating  Note some differences between Firefox and IE  Useful for seeing the immediate results rycss_text-indent rycss_text-indent

Box Model properties  Padding  Negative values  CSS shorthand: top right bottom left  Margin  Border

dimension  Width  Height

Positioning  The Positioning properties allow you to specify the left, right, top, and bottom position of an element.  It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Normal Flow  Default behavior of a web browser  Rendered according to what order the elements (like and are listed in the html.doc)  Example with float

Positioning: Four Ways of Placing  Static  Absolute  Relative  Fixed

position: static;  Static positioning is simply placing a box in the normal flow.  Default behavior of an unpositioned box  Rarely used except to override anotehr rule

position: absolute  NOT in the normal flow  Positioned relative to the element that contains it.  (if there is no element, it will be positioned relative to the tag)

position: relative;  Positioned to the normal flow  Relative to original position

position: fixed;  Relative to browser, not containing block.  Pulls out of the normal flow.  “carved into rock”  Wont resize

Positioning properties

Floating  In the normal flow  Allows text to flow around the box.  Can’t be manipulated like other positioned boxes with left: 20; etc.

Floating boxes  Determines where object is relative to the parent flow. selector { float: right ; } Possible values: left | right | top | bottom | inside | outside | start | end | none

Floating p { width: 24em } #l1 { float: left; width: 8em; height: 3em } #l2 { float: left; width: 4em; height: 6em } #r1 { float: right; width: 6em; height: 9em } #l3 { float: left; width: 7em; height: 9em } #r2 { float: right; width: 3em; height: 5em }

Length Units  {margin-right: 24px }  The number can be an integer or a decimal fraction, and can be preceded by + or -.  Units can be absolute or relative:  Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)  Relative: em, ex, px (the element's font height, the element's x-height, pixels)

Z-index  Z-index is used to specify the stacking order of the positionable elements.  The number value may be positive or negative, but MUST be an integer.  Default z-ordering of elements in a document is back-to-front in the order of their appearance in the HTML.  An element with property z-index: 3 is going to overlap a z-index:1

Overflow  Scroll  Auto  Hidden  Visible p{ overflow: auto; width: 200px; height: 300px; }

IE, i.e. “headache”  Box model discrepancies.  CSS Standards determine that  “width” = width of content  IE versions before 6 see it differently  “width” = padding+border+width of content

Box Model Hack: IE hack  The name says it all. Just remove the padding/borders from the problem box, nest a second box inside the first, and put the padding/borders and the content within that nested box. End of problem. It looks like this if you are using two divs:  div { width: 100px; } div.i { padding: 1em; } Text  If used while you have two nestled elements anyway, then the only negative effect of this solution (a single extra div in the HTML) is a non-issue. The major benefit of this method is that it works just about everywhere.

Validating your CSS  uri.html uri.html