1. Cascading Style Sheets
Advanced Styles

2. Positioning Static – normal flow order
Absolute – rel. to 1st positioned ancestor
Fixed – rel. to browser window
Relative – relative to "normal" position
"left:20" adds 20 pixels to left margin
© D. J. Foreman

3. Movement Controllable with JavaScript X, Y and Z axis movement
Not required for pre-defined layouts
Uses position properties
left, right, top & bottom
© D. J. Foreman

4. Multi-column layouts Create a style for each column
Apply it to a div tag as an ID
Add the ID attribute for JavaScript (if used)
© D. J. Foreman

5. Example –the styles
#leftcol {position: absolute; top: 5px; left: 1%; width:16%; background-color: black; border:5px blue solid} #mymaincol {position: absolute; top: 5px; left: 20%; height: 550px; width:58%} #rtcol {position:absolute; top: 5px; left: 80%; border:5px purple solid}
© D. J. Foreman

6. Example - usage <div id='leftcol'> </div>
My links for site navigation go here
</div>
<div id='mymaincol'>
Document html & data goes here
<div id='rtcol'>
Miscellaneous data goes here
© D. J. Foreman

7. What the %'s do
First col is 1% from edge of window and 16% of window width. Total=17%
Main col starts 20% from left edge (=> 3 % column margin). Uses 58% of window. (So 58%+20% = 78% used)
Rtcol is 80% from left edge (2% col margin). Uses remaining width (22%)
© D. J. Foreman

8. Diagram
80%
20%
16% 3%
58% 2% 1%
© D. J. Foreman

9. Problems can occur Nothing prevents overlapping
Text could be larger than layer
Overflow:scroll allows for scrolling of layers w/o JavaScript
© D. J. Foreman