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.


}


}


}

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;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;position: relative;left: 50px;top: 50px;

}


}


}

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;

}


}


}


}


}


}

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#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#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 {


}


}

div#bottombox {width: 100px;height: 90px;background-color: #cccccc;position: absolute;left: 50px;top: 50px;

}


}


}

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 {


}

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;

}


}


}

CSSdiv#topbox {


}

div#middlebox {width: 50px;height: 50px;background-color: #cccccc;position: relative;top: 40px;left: 40px;

}


}

CSSdiv#topbox {


}


}

div#bottombox {width: 50px;height: 50px;background-color: blue;position: absolute;top: 5px;left: 5px;

}

CSSdiv#topbox {


}


}

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>

CSSdiv#topbox {


}


}


}

CSSdiv#topbox {


}

div#middlebox {width: 50px;height: 50px;background-color: #cccccc;position: absolute;top: 30px;left: 30px;

}


}

CSSdiv#topbox {


}


}


}

Cases where divs are nested in a parent div.CASE 2: Parent div has NO position absolute or relativeHTML<div id="topbox">


</div>

CSSdiv#topbox {


}


}


}

CSSdiv#topbox {


}


}

div#bottombox {width: 50px;height: 50px;background-color: blue;position: absolute;top: 5px;left: 5px;

}

CSSdiv#topbox {


}


}

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;

}


}

CSSdiv#firstdiv {

width: 100px;height: 100px;background-color: red;position: relative;z-index: 1;opacity: 0.6;filter: alpha(opacity=60);

}


}

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.

lesson 04 // floats and positioning

Documents

block element

rightapplying float

positioningfloatsa float

horizontal flow

rightapplying clear

left corner

types of positioning

list changes