CSS Positioning - creating a stylesheet for Layout

Using CSS to position content

You can use a stylesheet to position the content instead of tables.

You do this by dividing your page up into divisions which can be defined by the <div></div> tag. You then give each <div> an ID tag to identify it in the stylesheet. For example is we want to position the <div> which we have assigned an "id" of "main" we would specify the width and

<div id="main">

then in your stylesheet you would add the positioning styles for "main". This could be where you want to position the main content of your web page., e.g:

Analysing each of these elements separately.

position:absolute;
- position can be absolute, relative, or static - this property is important in determining the effect of the other positioning styles on the element.

width:600px;
- this applies to block elements with a position value of "absolute"

z-index:1;
- this can be used to position layers above or below each other. Elements with higher z-index values will be positioned above elements with lower values.

left: 25px;
top: 160px;
- these define the position of the element with respect to the parent element. In the above example, if the <div id="main"></div> element is inside the <body></body> element the top left corner of the <div> element will be positioned 25 pixels from the left of the page and 160 pixels down.

If now we create another <div id="left"></div> tag inside this <div> element, and set the style of "left" in the stylesheet to be:

- it will be positioned relative to the <div id="main"></div> with a width of 200 and positioned 10 pixels to the left and 10 pixels down from the top left corner of the <div id="main"></div> element, because this "main" element is the "parent" element.

Notice the use of float:left; - this is to allow other content to be positioned to the right of the current element. It is similar to aligning an image to the left, so that text can be placed on the right of the image. If we omit the "float" style, then other content appears below.

We have now covered the basics of CSS. Hopefully you can now see that using CSS to position and format your web pages, allows you to achieve 4 important goals of web design that should be part of your website strategy:

uniformity of presentation
ease of site maintenance
separation of content from presentation
ease of browser compatibility

When the formatting and positioning of your content is controlled by stylesheets, updating your content becomes much easier.

arrowdown Stylesheet Resources

Layout - CSS - creating a stylesheet

Using CSS to position content