CSS -- Box Model

Discussion (reference stylin with CSS A Designers Guide, Charles Wyke-Smith, New Riders)

Positioning elements
- With CSS, you can position XHTML elements without relying on tables.
- The CSS properties to use for placement are margins, padding, and borders, floating and clearing. The three techniques to use are the box model, the position property, and the display property.
- Position property - defines the positional relationship between these elements on the page.
- Display property - determines whether elements stack or sit side-by-side or even display on the page at all.
- Box Model
  - Describes the positioning controls for every element in your markup.
  - There are four aspects of the box because it is a box it has a top, right, bottom, and left. When you are working with all four aspects you work in clockwise order starting at 12:00 o'clock. And, if you do not wish to write all 4 sides, the default for a side is the opposite side.
    - Border - the thickness, style, and color
      - Width includes thin, medium, thick, or any unit
      - Style includes none, hidden, dotted, dashed, solid, double, groove, ride, inset, and outset
      - Color includes any color value RGB, hex, or keyword.
      - Suppose you give your body a background color. Then you create a div and give it a different background color. You have not created a table, but you do have delimitation on the page. Sometimes you will want to temporarily do this during development to be able to see the spacing. All you need to do is p {border: solid}
      - If you are using different heading sizes and different text sizes, then the space between the headings and the paragraphs will be influenced by the text sizes. To take care of this, set your paragraph and heading margins to zero.
    - Margin - the distance between the box and adjacent element.
      - You can view the margins if you have a border around the text box. You will see the default margins. You can set all margins to 0 by using the wild card
        * {margin: 0; padding: 0}
      - If you do this first you won't get conflict with the default margins.
      - Vertical margins
        
        Remember the rule or vertical collapsing: When top and bottom margins meet, they overlap until one of the margins touches the border of the other element. If you have margins of unequal size, the margin selected with be the larger.
      - Horizontal margins
        
        Horizontal margin setting are added together.
    - Padding - the distance of the content from the border of the box. (browser dependent)
      - If you have a box width of 400 you should be setting the width of the text. If you add padding and add margins you will increase the amount of space displayed. The margins are outside of the box for most browsers. But different browsers treat the padding differently. The above is just the rule. Some browsers squeeze down the content for padding and borders.
- Position property
  - defines the positional relationship between these elements on the page.
  - There are 4 position properties
    1. Static
      - Static is the default position which means that block level elements stack by the default margins.
    2. Relative
      - The position of the element is set relative to the default position. However, the original position is maintained, it only displays differently, so you might have overlap with your next element. You must also change the margins to keep from having this overlap.
    3. Absolute
      - The absolute position takes the element out of the flow of the document. This position is calculated from the body element. If you scroll, your element goes out of view because the element always keeps its position.
    4. Fixed
      - The fixed position is like the absolute position but it does not keep its position when you scroll. So, element remains displayed when you scroll. You use this position when you want to create the look of a frame. This does not work in IE
  - Positioning Context
    - When you are moving an element you are moving it in respect to another element. It is either the previous element, as in static and relative, or the body tag as in absolute. You can change the absolute element from positioning from the body element by setting other elements to relative. Those relative positions are then relative to the absolute element.
    - Float Property
      - Floating an element is another way of moving it out of the normal flow of the document. Elements that follow a floated element will sit next to the floated element if there is room.
      - When you are floating an element remember to use a margin so that the text moves away from the image. If you float both the text and the image, the text will not wrap around the image.
      - float Property with Image
      - float Property with paragraph and Image
    - Clear Property
      - The clear property enables you to stop elements from moving next to a floated element.
      - float Property with No Clear
      - float Property with Clear
- Display property
  - determines whether elements stack or sit side-by-side or even display on the page at all.
    - Block elements - p, h, ul, ol, and dl start a new line when used.
    - Inline elements - span, img, are positioned side-by-side and only wrap when necessary.

Practice:

Open the template.htm page in LTS.
Save as kidsBook.htm
Create four pages that tell a childrens story. Include images and text. Place the text and images in different positons on each page. Use each of the positioning properties, a different one for each page.
Make sure that your pages validate. In LTS, click Tools, W3C Validate. Make any corrections necessary.
LTS does not validate CSS. To validate CSS go to W3C Validation Service and validate by file upload.