Launch School Notes !

1. Float If two column, one element float right and another float left , or you can float left for all element. If three column, three element float left. Note that all floated element u must specify width, if not, it will take whatever width necessary to fill the content. 2. Inline-block Need to specify width for them also , if not, they will take up whatever space necessary to fill the content. There are default spacing between inline-block, comment them out. Inline-block are vertical align in the bottom by default, you need to set vertical align property to top.

Static: the default position. Everything starts from top to bottom nicely according the document flow. Relative: still within normal flow of document. But accept offset position, relative to its original document flow position Absolute: out of normal flow. It doesn't interact with elements around it anymore. The reference point will be parent element that has relative positioning, if not, reference body element. Accepts offset position Fixed: out of normal flow. The element sticks to a corner of the page even if user scrolls. Reference the windows view.

There are three main ways to clear floats. 1. create and empty div at the bottom of the page. Then set 'clear: both' to that div. 2. create a pseudo element :after, then set 'display: block' 'content: ""' 'clear: both' properties to it. 3. set 'overflow:hidden' to the parent element. Overflow other than visible will create a block formatting context that will force the parent element to expand to fit the height and width of floated child.

Block element block element has width, height, border, padding and margin . The full box model is applied to them. It take up the whole width of the page. It break a newline before and after each element. Floated element are also block element but do not take up full width of page. Inline element Do not break a newline , but stay 'inline' with the rest of the content. Inline element do not have width and height dimension. Margin top and bottom are ignored. Padding top and bottom exist but won't push element above and below it away. Sideways margin and padding will push content away from it. Both inline and inline block element will have some spaces when there is whitespace between them. Inline-block element Behave like a block level element but do not break a new line. It will stay 'inline' with the rest of the content.

1. spaces between inline-block and inline element a. you can use zero font-size to eliminate the white space. Then reset back the font-size in the inner element to 1 rem. b. comments out the white space between the inline-block element. 2. methods to clear float. Method One .group:after {      display: block      content: ""      clear: both } Method Two add a empty div element after the floated element, then add a "clear: both" property. Method Three Use "overflow: hidden" within the parent container element. This creates a block formatting context that will cause the parent to expand to contain the width and height of the floated child element. 3. static, relative, absolute, fixed positioning Static element is the default position. All element are in the document flow. Relative position element are in the document flow. But accept offset property to move against its parent container. Absolute position is taken out...

1. Make a block element to contain both main content area and side area. Set a max-width to it . 2. Float the main content area to the left. Set its width to 70%. 3. Have the sidebar have the property with "overflow: hidden" . The sidebar will maintain its own block.