Code 201: Class 08 - HTML/CSS Layout Review

Read: # Subheading

Controlling the Position of Elements

Normal Flow block level elements stack on top of one another
Relative Positioning changes the location of the element in question relative to its normal position, does not effect those around it
Absolute Positioning positions the element in relation to its containing element, taken out of normal flow and will move as users scroll
Fixed Positioning positions an element in relation to the browser window, do not impact the position of near by elements, does not move with scroll
FLoating Elements removes from normal flow, allows other elements to flow around it

Z-index property determines which box appears on top when out of normal flow and overlapping

Clearing Floats

clear: left; left hand side of box should not touch any other element in the same containing element
clear: right; right hand side of box should not touch any other element in the same containing element
bothneither side should touch

Multi Colum Layout

Typical Screen Sizes

Fixed Width Layouts

Designs do not change as the browser window size is changed
- Typically defined in terms of pixel widths and heights

Liquid Layouts

Stretch and contract to fit the browser window
- Tend to use percentages to define dimensions
- Better adapt to varying screen sizes

Layout Grid

CSS Frameworks provide code for common tasks like creating layout grids

Linking multiple css sheets

Can link each individually to index.html
- <link href="css/style.css" type="text/css" rel="stylesheet" /> in index.html
- <link href="css/style-1.css" type="text/css" rel="stylesheet" /> in index.html
Can import multiple style sheets in the primary style.css file
- @import url("style-1.css"); in primary style.css