If a browser has no information about how elements are to be placed on a web page, the browser will place the html elements in the order that they are written between the
<body> and </body> tagsClick Here to see a "normal flow" example
An Aside: always place your web pages in a container or wrapper...(The Link Takes you to bluerobot.com.)
Float is well supported in all browsers and is the easiest to use for "positioning" elements on a page as you only need a one line statement like:
float: left; float: right; float: none; float: inherit;In order for "float" to work you need to add the width of the element that you want to float...
width: 100px;
"left" places the element to the left of the web page or container and the remaining content flowing to the right. etc., with none being the "default" and inherit uses the float value for the parent element.
Click here to see an example you can try out...The position property defines how an element will be positioned on a page - relative to it's position in the XHTML or relative to the top left corner of the browser window. top: 0px; is the top of a browser window and left: 0px; is the left side of a browser window ...
position: static; position: relative; position: absolute; position: fixed; position: inherit;
"static"
is the default and is the same as normal flow.
"relative"
The relative position of an HTML element is determined by the normal flow of the previous HTML elements on the page. The relative position is calculated from the top and left corner of the element from where it would be normally located without applying any position rules. The new position is moved down or up by the top property value and moved right or left by the left property value using positive or negative top and left values...
"absolute"
Absolute is relative to its parent element, and ignores the normal flow of HTML elements removing the box from the normal flow. Position: absolute; is calculated from the left and top of the browser. If you use position values from the right or bottom edge of the browser, the position values will change as the size of the browser window is contracted or expanded. You can also change the height of a box above the "default background" using a z-index value... As a result you can layer and overlap boxes on a web page.
"fixed"
Fixed positioning is a subcategory of absolute positioning. An element whose position property is set to fixed always has the viewport (the computer screen) as its containing block. In other words a "position: fixed;" element will not move on the computer screen when the document is scrolled. In the example link below use the browser scrollbar to move down the page..."inherit"
The element takes the position value defined for the parent element.
to see the example page click here...