Divisions

• HTML allows you to divide your page up into divisions or sections. 
  
• The <DIV> and </DIV> tags are used to contain a particular division.
• You can add style attributes to speficify where the division is placed on the page, and the look of its contents.
• For more try here:
• Absolute, Relative, Fixed Positioning: How Do They Differ?
• CSS Positioning
  
• Style properties
• Position
• fixed - fixed position relative to browser window, will not move even if the browser scrolls.
  
• relative - relative to its normal position in the document flow, use this to help align an item that is a little out of place in its normal position
  
• absolute - relative to the first parent element that has a position other than static, or to the page itself.
  
• static - default, item is set in the normal document flow.
  
• example - position:fixed;
  
• top
  
• Declares the distance that the top content edge of the element is offset below the top edge of its containing block
• Can be in terms of pixels (px) or % of the browser window
• example:
• top:25px;  
  
• bottom
  
• Declares the distance that the bottom content edge of the element is offset above the bottom edge of its containing block.
• Can be in terms of pixels (px) or % of the browser window
• example:
• bottom:25px;
  
• left
  
• Declares the distance that the left content edge of the element is offset to the right of the left edge of its containing block.
• Can be in terms of pixels (px) or % of the browser window
• example:
• left:25px;
  
• right
  
• Declares the distance that the right content edge of the element is offset to the left of the right edge of its containing block..
• Can be in terms of pixels (px) or % of the browser window
• example:
• right:25px;
• width
• width in % or pixels
• example:
• width:400px;
• height
  
• height in % or pixels
• example:
• height:400px;
• overflow
• specifies how to handle content that does not fit in the division
• auto - add scroll bars if needed
• scroll - always have the scroll bars (rarely used)
  
• hidden -  hide text that does not fit
  
• visible - show the text (it may overlap other adjacent divisions)
• outline-style
• specifies a border to go around the division.  You'll need to allow an extra 5 pixels or so for this
• values are : none, dotted, dashed, solid, double, groove, ridge, inset, outset

Some basic rules

• Use an  overflow setting of auto
• Its usually best to specify the left and top locations along with a width and a height.
  
• Optionally you can use color or borders to outline the regions
• Use a sheet of paper to draw your divisions and do a preliminary calculation of sizes and locations.  Note, most screens will support 1280x1024 resolution, but some are smaller.
  
• The following example sets up a page with 5 divisions, one for the top, left, right, middle, and bottom, a 20 pixel margin is on the left and top. This setup does not have any overlapping divisions.  click here to view