Positioning demo: Try resizing the window. This main part should rearrange itself to suit the new window size (until you make it too narrow).

Netscape 4 will have serious positioning problems here because of its badly bugged rendering engine. You have to choose whether or not you still want to support this out-of-date, broken browser.

Positioning will work in all '4^th generation' browsers (except iCab 2-) using two types of positioning; absolute and relative. Relative positions an element relative to the position it would naturally be in. The space will be left for it. If it is correctly displaced, it can float on top of other elements. Absolutely positioned elements are positioned relative to the top left corner of the document. No space will be left where they normally would be. They will float over other elements.

Positioned elements should be given a combination of top, left, bottom, right, width and / or height properties to allow the browser to work out where to put the element. For the best reliability in old browsers, it is best to position only DIV elements. Newer browsers can position most elements.

Positioning is very useful, especially in DHTML. Absolutely positioned elements inside relatively positioned elements are positioned relative to the relatively positioned element. Got that? This means that they can be inserted into the document like a normal block element (like a paragraph) but can accept styles normally given to absolutely positioned elements.

As an example of the ability of CSS positioning (CSS-p), how about designing page layout without using tables:

div.sideLink {
	/* side link container */
	position: absolute;
	left: 30px;
	top: 50px;
	width: 140px;
}
div.sideLink div {
	/* borders and padding for
	the div inside the side
	link container */
	padding: 10px;
	border: 2px solid #000077;
}
div.mainPart {
	/* main container */
	position: absolute;
	left: 200px;
	top: 20px;
	right: 30px;
}
div.mainPart div {
	/* borders and padding for
	the div inside the main
	container */
	padding: 10px;
	border: 2px solid #007700;
}
div.sideLink div a {
	/* links in the side link
	conatiner */
	width: 100%;
	display: block;
	background-color: #bbbbff;
	margin-bottom: 2px;
}
div.sideLink div a:hover {
	/* hover effect for the
	links in the side link
	conatiner */
	background-color: #bbffff;
}

Div elements of class sideLink will be 30 pixels from the left and 50 pixels from the top of the window. They will be 140 pixels wide. Links within those div elements will be the full width of the element (if the browser supports that). Div elements of class mainPart will be positioned 200 pixels from the right and 20 pixels from the top of the window, and will be sized wide enough to be 30 pixels from the right side of the screen. This will position these elements to the right of the div elements of class sideLink.

Some browsers will position the elements taking their borders and padding into account, and others will not, so the page looks different in different in different browsers. It may be a better idea to put the positioning onto one div, then put another div inside it, to which you assign borders and padding, and make the width 100% of its parent element's width. I have done this here. Both classes of div element will have a 2 pixel thick border, and will leave 10 pixels between the border and the contents.

Try it here: see these positioning styles in action.

Back to CSS tutorial