Positioning:
Without any positioning Look @ the example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: No Positioning</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #box{margin: 10px; padding: 10px; width:120px;} </style> </head> <body> <div id="box"> Box 1 </div> <div id="box"> Box 2 </div> <div id="box"> Box 3 </div> </body> </html>
All boxes would come under each other.
Relative Positioning
An element is positioned relative to its normal flow.
Now lets position box 2 relative 10px left and 10 px down.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Relative Positioning</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #box{margin: 10px; padding: 10px; width:120px;} #boxrelative{margin: 10px; padding: 10px; width:120px;position: relative; left: 10px ;top: 10px} </style> </head> <body> <div id="box"> Box 1 </div> <div id="boxrelative"> Box 2 </div> <div id="box"> Box 3 </div> </body> </html>
Now see that the box is relative to where is was supposed to be
Absolute positioning
The position of the element is absolute to the container
Lets take the box 2 and position it to the right of the entire container. (in this case the body element)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Absolute Positioning</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #box{margin: 10px; padding: 10px; width:120px;} #boxabsolute{margin: 10px; padding: 10px; width:120px;position: absolute; right: 0px; top: 0px} </style> </head> <body> <div id="box"> Box 1 </div> <div id="boxabsolute"> Box 2 </div> <div id="box"> Box 3 </div> </body> </html>
Floating
Floating will remove the normal flow of the document. Here is the example with the same HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Floating</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #box{margin: 10px; padding: 10px; width:120px;float: left} </style> </head> <body> <div id="box"> Box 1 </div> <div id="box"> Box 2 </div> <div id="box"> Box 3 </div> </body> </html>
Notice the line on the top of the boxes. This is because the boxes are floating outside of the container(in this case the body tag). You should add an extra(dummy) clear to clean it up.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Floating</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #box{margin: 10px; padding: 10px; width:120px;float: left} #clear{clear:both} </style> </head> <body> <div id="box"> Box 1 </div> <div id="box"> Box 2 </div> <div id="box"> Box 3 </div> <div id="clear"> </div> </body> </html>
Image Floating and Clear
Look at the example below. Nothing is floated
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Image Floating</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} </style> </head> <body> <img id="imggavi" src="gavi.jpg"> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> </div> </body> </html>
Now after floating the image to left
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Image Floating</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #imggavi{float:left} </style> </head> <body> <img id="imggavi" src="gavi.jpg"> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> </div> </body> </html>
Now with Clear applied to the second p tag, it will come to the bottom
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Positioning Example: Image Floating</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> *{border: 1px solid #f00} #imggavi{float:left;} #tobecleared{clear:left} </style> </head> <body> <img id="imggavi" src="gavi.jpg"> <div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> <p id="tobecleared"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p> </div> </body> </html>
