Mastering Layout and Positioning for HTML

1. Layout & PositioningThe real power!(Chapters 11 & first 2 pages of 12)

2. First Steps • Organize your page with HTML, remember HTML is JUST THE STRUCTURE. • Logically BLOCK off your page into divisions. Keep in mind this may require nesting some DIV elements. • Place elements in ORDER in case they are seen without CSS. Important things toward the top. • REMEMBER: some elements are BLOCK (div, p, etc), some are INLINE (span, em, a, etc) • REMEMBER: Natural FLOW of document is in order of element creation from left to right, top to bottom.

3. The Box Model • Content is in center of box • Padding is between content and border • Margin is outside border

4. Width & Height • Width is the horizontal (left to right) measurement. • Height is the vertical (top to bottom) measurement. • Measurements can be: • A value with a unit (height: 150px;) • A percentage of the PARENT element (width: 60%;) • NOTE: If a parent element DOES NOT have a width, percentages may not work with width & height. • NOTE: Padding, margins, and borders are NOT included in the measurements for width & height. • NOTE: Inline elements IGNORE width & height.

5. Margins & Padding • Margins & Paddings are set the same way, there is a top, right, bottom, and right value. • Set all 4 equally: margin: 15px; • Set top/bottom and left/right: padding: 20px 10px; • First value is top/bottom, second is left/right • Set all 4 separate: margin: 0 10px 25px 0; • Order is always: start at top – go clockwise • top, right, bottom, left • Set individually by property: padding-left: 15px;

6. Display Property • The CSS display property can be used to CHANGE the way an element displays • display: block; • Makes the element BLOCK • Has a definable width & height and line feed before & after the element. • Default width is 100% of container minus padding, border, and margin. • display: inline; • Makes the element INLINE • Will ignore width & height and no line breaks

7. Display vs Visibility • display: none; • Makes the element NOT APPEAR and NOT IN FLOW • This is most common, preferred method • Can still be formatted, just will not show – later we will learn Javascript to make an element appear. • visibility: hidden; • Makes the element NOT APPEAR but STILL RESERVE SPACE IN FLOW • Can still be formatted, will not show, but will reserve the space on the screen where the element should be • Default for visibility property is visible.

8. Positioning • The CSS position property tells where an element should be and then allows you to OFFSET its position. • position: relative; • Leaves element in current position and any offsets are in reference to where the element WOULD be. • Flow is NOT affected by offsets, just the element being offset is affected. • position: absolute; • REMOVES the element from flow. Offsets are in reference to an ANCESTOR element that has position set.

9. Positioning • position: fixed; • REMOVES the element from flow. Offsets are in reference to the BROWSER WINDOW. • Possible offsets: • top: distance to offset from top • right: distance to offset from right • bottom: distance to offset from bottom • left: distance to offset from left • Only ONE horizontal and ONE vertical offset are valid. • Offset percentages are of the CONTAINER.

10. Float • The CSS float property lets you float elements to the left or right. • float: left; • Flow goes around the right side of the floated element. • float: right; • Flow goes around the left side of the floated element. • Flow returns to normal after the floated elements have ended.

11. Clear • The CSS clear property lets you restrict or reset flow with respect to float. • clear: left; • The element will not enter flow until all float: left elements are finished. • clear: right; • The element will not enter flow until all float: left elements are finished. • clear: both; • The element will not enter flow until all float: left and float: right elements are finished.

12. Clear • It’s common practice to group elements that will be floated and create a “clear div” to place after these. .clear { clear: both; } div#left-col { width: 200px; float: left; } div#right-col{ width: 200px; } <div id="left-col"> <h1>Left column</h1> </div> <div id="right-col"> <p>Right column</p> </div> <div class="clear"></div> <hr />