relative containing block

Elements with position:relative are positioned relative to themselves. If we just set position:relative on an element, without specifying any of the edge properties, the element ends up exactly where it would have been if we had set position:static, or if we hadn't set position at all.

But there is one important usage. If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1, not matter they are static/absolute/relative/float(width). Thus, it serves as a container (or containing block).

By definition, the containing block of an absolutely positioned element is its nearest positioned ancestor with position property is absolute, fixed or relative. So if we don't define div-1 as relative positioned, it won't be its containing block.

Note that this is a special definition for absolutely positioned element **only**. The containing block of other elements is any block box (div) surrounding it.

A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible in its containing block.
(float:right doesn't work in IE? ->the element must have width defined)

1. Learn CSS Positioning in Ten Steps
2. Relatively absolute
3. Atlantic CSS ZenGarden

radio button

<form name="orderform">
Which one is your favorite?
  <input type="radio" name="music" value="Rock" checked="checked"> Rock
  <input type="radio" name="music" value="Reggae"> Reggae
  <input type="radio" name="music" value="Pop"> Pop
  <input type="radio" name="music" value="Metal"> Metal
  <input type="submit" onclick="get_radio_value()">  
</form>

Accessing the value for a set of radio buttons is not that straight forward. document.form_name.radio_name.value does not work.
To get the associated value -

function get_radio_value() {
  for (var i=0; i < document.orderform.music.length; i++) {
       if (document.orderform.music[i].checked) {
            var rad_val = document.orderform.music[i].value;
       }
    }
}

In DOM object, the radio "music" is an array of elements. But when the form is submitted, there is only one attribute 'music' with the checked radio value.

Also, note that there are two different way to access DOM element. document.getElementById or document.<form-name>.<input-element-name>

For select drop-down, we can set the selection either by select_element.value or iterate its options array, and set selectedIndex value. Note that onchange event won't be triggered automatically.