Lesson 04 // Floats and Positioning

1. Lesson 04 // Floats and Positioning

2. Floats

3. A float is a block element that is shifted to the left or right. Ex: div#box{ width: 100px; height: 230px; background-color: #ff0099; } div#box{ width: 100px; height: 230px; background-color: #ff0099; float: right; }

4. An element with float applied to it, gets plucked out of the flow. div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } float: right; float: right; float: left;

5. Applying clear to an element is telling it to clear the float of the first element before it that has a float. div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } float: right; clear: right; clear: right; clear: left; clear: both;

6. Applying float: left or right to items in a list changes them from a vertical to a horizontal flow. float: left; CSS HTML <ul> <li class="stylinglist">About Us</li> <li class="stylinglist">Products</li> <li class="stylinglist">Services</li> <li class="stylinglist">Research</li> <li class="stylinglist">Contact Us</li> </ul> li.stylinglist { padding: 5px 0; width: 120px; background-color: #990066; border-left: 1px dotted #ffffff; list-style-type: none; text-align: center; }

7. Positioning

8. We will cover 2 types of positioning: absolute or relative. With positioning we can specify: top bottom left right z-index div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#topbox { width: 100px; height: 90px; background-color: #ff0099; position: absolute; left: 200px; top: 100px; } div#topbox { width: 100px; height: 90px; background-color: #ff0099; position: relative; left: 200px; top: 100px; }

9. div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } div#topbox { width: 100px; height: 90px; background-color: #ff0099; position: relative; left: 50px; top: 50px; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } Applying relative positioning to an element, keeps it in the flow, flow is not affected.

10. div#topbox { width: 100px; height: 90px; background-color: #ff0099; position: absolute; left: 50px; top: 50px; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; } Applying absolute positioning to an element, plucks it out of the flow, flow gets disrupted.

11. Applying position: relative to an element, moves the element relatively to where it was and won’t break the flow: div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; position: relative; left: 50px; top: 50px; }

12. Applying position: relative to an element, moves the element relatively to where it was and won’t break the flow: div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; position: relative; right: 50px; bottom: 50px; }

13. Applying position: absolute to an element, plucks it out of the flow, places it at the top-left corner of its parent (if specifying top & left), and moves it: div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; position: absolute; left: 50px; top: 50px; }

14. Applying position: absolute to an element, plucks it out of the flow, places it at the bottom-right corner of its parent (if specifying bottom & right), and moves it: div#topbox { width: 100px; height: 90px; background-color: #ff0099; } div#middlebox { width: 100px; height: 90px; background-color: blue; } div#bottombox { width: 100px; height: 90px; background-color: #cccccc; position: absolute; right: 50px; bottom: 50px; }

15. Cases where divs are nested in a parent div. CASE 1: Parent div has position either absolute or relative HTML <div id="topbox"> <div id="middlebox"></div> <div id="bottombox"></div> </div> CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; position: absolute; top: 5px; left: 5px; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; position: absolute; bottom: 5px; right: 5px; }

16. Cases where divs are nested in a parent div. CASE 1: Parent div has position either absolute or relative HTML <div id="topbox"> <div id="middlebox"></div> <div id="bottombox"></div> </div> CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; position: absolute; top: 50px; left: 50px; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: absolute; top: 30px; left: 30px; } div#bottombox { width: 50px; height: 50px; background-color: blue; }

17. Cases where divs are nested in a parent div. CASE 2: Parent div has NO position absolute or relative HTML <div id="topbox"> <div id="middlebox"></div> <div id="bottombox"></div> </div> CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; position: absolute; top: 5px; left: 5px; } CSS div#topbox { width: 120px; height: 120px; background-color: #ff0099; } div#middlebox { width: 50px; height: 50px; background-color: #cccccc; position: relative; top: 40px; left: 40px; } div#bottombox { width: 50px; height: 50px; background-color: blue; position: absolute; bottom: 5px; right: 5px; }

18. Z-index only applies to positioned elements. It represents the stack level of a box (arrangement in a pile). CSS div#firstdiv { width: 100px; height: 100px; background-color: red; position: relative; } div#seconddiv { width: 50px; height: 50px; background-color: blue; position: absolute; left: 80px; top: 80px; } CSS div#firstdiv { width: 100px; height: 100px; background-color: red; position: relative; z-index: 1; } div#seconddiv { width: 50px; height: 50px; background-color: blue; position: absolute; left: 80px; top: 80px; } CSS div#firstdiv { width: 100px; height: 100px; background-color: red; position: relative; z-index: 1; opacity: 0.6; filter: alpha(opacity=60); } div#seconddiv { width: 50px; height: 50px; background-color: blue; position: absolute; left: 80px; top: 80px; }

19. Applying display: block; in Css on an inline element makes the element behave like a block-level element. Applying display: inline; in Css on a block-level element makes the element behave like an inline element. Applying display: none; in Css to an element, makes it disappear, and the behavior on the screen is as though it never existed. Applying visibility: hidden; in Css to an element, makes it disappear, but the behavior on the screen is as though it is still there, just invisible.