Div Positioning - Basic Options

Think of divs as flat boxes that you can contain things in and then move around on the page.

You can make divs act like rigid boxes to hold other elements by defining a div's width in pixels using CSS (give the div a unique id, for example, and then set its width within the CSS settings for that id).


.classname     /* select all the divs having this same class name -A DANGEROUS Choice for selecting 
                      a div for positioning! Use an individual #idname instead... */
{
	position: fixed;  /* fixed does not scroll with the page, not in flow */
	top: 200px;      /* vertical location of top of div from inside top of window   */
	left: 200px;     /* horizontal location of left of div from inside left of window */
	width: 200px;     /* set width of the div - usually a good idea */
	background-color: #993399;  /* optionally, set background colour of div */
}


#idname     /* select the div having this id name -A GOOD Choice for selecting a div for positioning! */
{
	position: relative;  /* relative scrolls with the page, is in flow of page */
	top: 30px;
	left: 50px;
	width: 30px;
	height: 300px;      /* setting div height sometimes desirable, test it */
	background-color: #33ff33;     /* setting background colour of div shows its box/rect shape */ 

}


#idname2
{
	position: absolute;  /* absolute scrolls with the page, yet not in flow of page */
	top: 0px;
	left: 200px;
	width: 557px;
	 /* no background colour in a div means the box/rectangle of the div is invisible, 
	   but the contents of the div (the words and tags inside the div) ARE visible.
	   So the contents appear to float in the position you set the div to. */ 
}

Page Flow:

If a div is in the flow of the page it means that the div will push elements below the div (tags, words and images following the div) further down the page normally or similar to normal. Also, a div in the flow of the page is itself pushed further down by preceding elements.
      - Static and Relative are both in page flow.

If a div is NOT in the flow of the page it means that the div's position on the screen will not affect or be affected by other elements, unless it happens to overlap them --in which case it might even end up hiding them underneath itself, for example. Conversely, the other elements may hide it underneath them. The order in which elements overlap or hide each other depends on the z-index, which we will cover in upcoming weeks.
      - Fixed and Absolute are both out of page flow.


Example Code Based on Above:

Notice the code in green:

<head>
<style>

 body { background-color: #ffffff;
        font-family: Times, sans-serif;
        font-size: small;
        color: black;
     }
   
  
#redsquare {
	position: absolute;  /* absolute scrolls with page, not in flow */
	top: 100px;
	left: 500px;
	width: 200px; 
	height: 200px;     
	background-color: #ff0000; 
	color: white;   
} 

</style>
</head>

<body>
  
<div id="redsquare">
MONTREAL
</div>

Other tags and words go here, and would be in normal flow.

</body>

See the above code in action on a page: Example Code Based on Above