CLASS-08

CSS LAYOUT

CSS treats each HTML element as its own box, block-Level or inline-Level. It has the following positioning schemes to control the layout:

Normal Flow: Every block-level element appears in a new line.
Relative Positioning: Moves the element from where it would have been in normal flow.
Absolute Positioning: Positions the element in relation to its containing element. It moves as the user scrolls up or down.
Fixed Positioning: Similar to absolute positioning but positions the element in relation to the browser window instead. It does not move when the user scrolls up or down.
Floating Elements: Takes element out of normal flow and position it to the far left or right of the a containing box.
z-index: Helps with overlapping elements. We use it to control what elements sit on top of others.

We often use the <div> element as a containing element to group together sections of a page.

TYPES OF LAYOUTS

Fixed Width Layouts: These type of designs do not change size as the user increases or decreases the size of their browser window.
Liquid Layouts: These designs stretch and contract as the user increases or decreases the size of their browser window.
Grids: Designs a grid structure to help position items on a page.

Most designers keep pages between 960-1000 pixels wide and indicate what the site is about within the top 600 pixels.