Download - Lesson 04 // Floats and Positioning
Lesson 04 // Floats and Positioning
Floats
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;
}
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;
}
An element with float applied to it, gets plucked out of the flow.
float: right;
float: right;float: left;
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;
Applying float: left or right to items in a list changes them from a vertical to a horizontal flow.
<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>
HTMLli.stylinglist {
padding: 5px 0;width: 120px;background-color: #990066;border-left: 1px dotted #ffffff;list-style-type: none;text-align: center;
}
CSS
float: left;
Positioning
We will cover 2 types of positioning: absolute or relative.
With positioning we can specify:topbottomleftrightz-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;
}
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.
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.
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;
}
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;
}
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;
}
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;
}
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:
CSSdiv#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;
}
Cases where divs are nested in a parent div.CASE 1: Parent div has position either absolute or relativeHTML<div id="topbox">
<div id="middlebox"></div><div id="bottombox"></div>
</div>
CSSdiv#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;
}
CSSdiv#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;
}
CSSdiv#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;
}
CSSdiv#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;
}
Cases where divs are nested in a parent div.CASE 1: Parent div has position either absolute or relativeHTML<div id="topbox">
<div id="middlebox"></div><div id="bottombox"></div>
</div>
CSSdiv#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;
}
CSSdiv#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;
}
CSSdiv#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;
}
Cases where divs are nested in a parent div.CASE 2: Parent div has NO position absolute or relativeHTML<div id="topbox">
<div id="middlebox"></div><div id="bottombox"></div>
</div>
CSSdiv#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;
}
CSSdiv#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;
}
CSSdiv#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;
}
Z-index only applies to positioned elements. It represents the stack level of a box (arrangement in a pile).
CSSdiv#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;
}
CSSdiv#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;
}
CSSdiv#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;
}
Applying display: block; in Css on an inline element makes the element behave like a block-level 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.
Applying display: inline; in Css on a block-level element makes the element behave like an inline element.